Placing Divs "inline" in Bootstrap

Question

I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.

I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.

.steven-and-leah{
  display: inline;
}

.team-bx{
  width: 500px;
  height: 570px;
  margin-top: 80px;
  border: 5px solid #FFF;
  border-radius: 120px;
  padding: 20px 0px 20px 0px;
  overflow: hidden;
  background-color: #111924;
}

Answer 1

You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.

If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:

<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>

This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.

If this is not your question, please reframe it.

You can find great examples in their getting started site

Answer 2

Did you try with this. check the demo

.steven-and-leah > * {
    display: inline-block;
}

Demo