CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayout
CentrixDE
CentrixDE

Reputation: 117

Two columns next to one other

I currently have two Divs next to each one big div like this:

enter image description here

The reason why I don't use a row instead of putting every div as a single one is that I need "DIV2" in the Mobile version to be between the two other divs.

But the big space between DIV1 and DIV3 ruins everything, how can i remove the spacing without losing my wanted layout?

HTML Code:

      <div class="DIV1 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
      <div class="DIV2 col-xs-12 col-sm-4 col-md-4 col-lg-4" />
      <div class="DIV3 col-xs-12 col-sm-8 col-md-8 col-lg-8" />

I use the standard Bootstrap code for the styling

Upvotes: 0

Views: 84

Answers (2)

Mohit Yadav
Mohit Yadav

Reputation: 471

Both div1 and div3 should be in the same column so put these in a another div and than you can use display:inline-block or display:flex-box;

<div class="fl">
<div class="div1">
<div class="DIV1 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
  <div class="DIV3 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
</div>
  <div class="DIV2 col-xs-12 col-sm-4 col-md-4 col-lg-4" />
</div>

.fl
{
display:flex-box;
}

Upvotes: 0

manneJan89
manneJan89

Reputation: 1024

What you can do is do is add float to your divs via the class pull-left or pull-right provided by bootstrap. This will make DIV3 take up the big space.

Check out the fiddle:

https://jsfiddle.net/80r028jq/1/

Upvotes: 2

Related Questions