0

I've created this grid that you see below: Example:

without using bootstrap or other grid system. Now I want to use bootstrap but I don't know if it's possible to create something like that, because it's not saving the equal spaces between the boxes,

for example: http://jsfiddle.net/xe6h7grs/

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <div class="box">A</div>
        </div>

        <div class="col-md-4">

            <div class="box">B</div>
        </div>

        <div class="col-md-4">

            <div class="box">
                C
                <ul>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>

        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>

        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>
    </div>

</div>
user4571629
  • 440
  • 3
  • 10
  • 24

2 Answers2

1

Bootstrap columns have left/right padding which may cause you unwanted spacing. You can override this padding as you need to.

.col-xs-4 {
    padding: 0;
}

http://jsfiddle.net/xe6h7grs/1/

Or you can set the box class margin to a negative value to override the padding.

.box {
    margin: 1px -15px;
}

Also note for responsiveness, default column width is 100% and the specified sizes scale up. This means that if you only declare md, xs and sm will be 100%.

Adam Milecki
  • 1,738
  • 10
  • 15
  • and what if I want to remove the white space between the two rows? is there a way that I can make it more flexible? – user4571629 Oct 15 '15 at 17:27
  • There are many, and I mean many way, users attempt to match column heights (flexbox, padding/margins, JavaScript, table grids). Pick your poison: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height. None are perfect so you need to choose the one that fits your responsiveness and compatibility needs. – Adam Milecki Oct 15 '15 at 17:39
0

1) Generally speaking, you should not arbitrarily alter the Grid itself. Instead you can use a custom class: 

.no-gutter >[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

This will allow you to adjust the column padding (and whatever other rules concerning columns) to whatever you need.

2) Or if you use SASS you can use the below Variable to adjust the padding.

//** Padding between columns. Gets divided in half for the left and right.

 $grid-gutter-width:         30px !default;

3) And you can use a custom build as well if it makes sense. See Customize Grid System.

See examples in Snippet.

body,
html {
  padding-top: 20px;
}
.lightblue {
  background: lightblue;
}
.red {
  background: #f00;
}
.box {
  background: #ddd;
  padding: 20px;
}
.box2 {
  background: #f00;
  color: white;
  padding: 20px;
  margin: 1px;
}
.box3 {
  background: #444;
  padding: 20px;
  margin: 1px;
  color: white;
}
.no-gutter >[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Original Grid</h3>

  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box">A</div>
    </div>
    <div class="col-md-4">
      <div class="box">B</div>
    </div>
    <div class="col-md-4">
      <div class="box">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Your example Grid</h3>

  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box2">A</div>
    </div>
    <div class="col-md-4">
      <div class="box2">B</div>
    </div>
    <div class="col-md-4">
      <div class="box2">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Columns with Zero Padding | Outcome</h3>

  <div class="row no-gutter red">
    <div class="col-md-4">
      <div class="box3">A</div>
    </div>
    <div class="col-md-4">
      <div class="box3">B</div>
    </div>
    <div class="col-md-4">
      <div class="box3">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row no-gutter red">
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
  </div>
</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41