CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Matthew Farmer
Matthew Farmer

Reputation: 37

Placing Divs "inline" in Bootstrap

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;
}

Upvotes: 2

Views: 25365

Answers (3)

Abdel
Abdel

Reputation: 97

You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline

<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>

You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.

Upvotes: 0

Obed Parlapiano
Obed Parlapiano

Reputation: 3682

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

Upvotes: 8

Yonas Hailu
Yonas Hailu

Reputation: 853

Did you try with this. check the demo

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

Demo

Upvotes: 1

Related Questions