CODEWITHSUNDEEP
twitter-bootstrapgrid-layout
pwas
pwas

Reputation: 3373

Make row as one column

I know that "recommended" snippet for rows /columns in bootstrap is:

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

Everyting is fine - padding & margin are preserved in each column set.

But in my code there is a lot of stuff like:

<div class="row">
   <div class="col-md-12"></div>
</div>

Is this possible to merge it as one div? I think I could write sth like this:

<div class="row col-md-12">
</div>

(JS Fiddle)

Unfortunatley it doesn's work (as you can see, 3rd row is shorter). What can I do to avoid additional div with col-md-12?

Upvotes: 0

Views: 37

Answers (1)

Eric Phillips
Eric Phillips

Reputation: 920

The reason you are seeing the difference is because .row defines a negative margin-left and margin-right of -15px and .col-*-* defines a width of 100%

Bootstrap's css

.row{
    margin-left:-15px;
    margin-right:-15px;
}

.col-[rest of class name]{
    width:100%;
}

The width of 100% is causing the negative margin to be ignored. If you override the negative margin, your div's will have the same width.

Override bootstrap css

.row{
  margin-left:0px;
  margin-right:0px;
}

While I would recommend sticking to bootstrap's intended usage, this will remedy your width problem.

Fiddle

https://jsfiddle.net/DTcHh/15539/

Upvotes: 1

Related Questions