CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3padding
user7474176
user7474176

Reputation:

Half-column width margin outside column in Bootstrap

I have a div which takes 12 Bootstrap columns. How can I add margin of half of a column on right and half of a column on left?

Here is a starting point.

html:

<div class="row">
  <div class="col-md-12 takes12Columns">
    DIV WHICH TAKES 12 COLUMNS
  </div>
</div>

css:

.takes12Columns
{
  background: red;
  text-align: center;
}

https://jsfiddle.net/1gpna1h5/.

Upvotes: 2

Views: 1628

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362610

There is no way to do this with standard Bootstrap. You can create a custom build with 24 columns, or you can make a custom row class to add the margins that are equivalent to 1/2 a column unit of 8.33333%. Then subtract the normal negative margin of the row.

.row-custom {
  margin-left: calc(4.166666% - 15px);
  margin-right: calc(4.166666% - 15px);   
}

Also, row should always be placed inside container.

http://www.codeply.com/go/QFy6hVUVDc

Upvotes: 2

Ramzan Mahmood
Ramzan Mahmood

Reputation: 1901

If you Using bootstrap you can use container-fluid or simple container class to make changes on side of columns in above case you can use margin-right or margin-left please see

Js Fiddle

Upvotes: 0

Related Questions