HTML Bootstrap col-md-4 no gutter between

HTML-CSS
1

Hello all,
i cannot figure out why my col-md-4 does not work. It should add spaces between automatically?

<div class="container" id="our-menu">
      <h2 id="menu-categories-tile" class="text-center">Our Menu</h2>
      <div class="row" id="home-tiles">
        <div class="col-md-4 col-sm-6 col-xs-12" id="chicken-tile">
          <h3 class="menu-item-title">Chicken</h3>
          <p class="menu-item-details">Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#header-nav" class="visible-xs">Back to top</a></p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12" id="beef-tile">
          <h3 class="menu-item-title">Beef</h3>
          <p class="menu-item-details">Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#header-nav" class="visible-xs">Back to top</a></p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12" id="sushi-tile">
          <h3 class="menu-item-title">Sushi</h3>
          <p class="menu-item-details">Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#header-nav" class="visible-xs">Back to top</a></p>
        </div>
      </div>
    </div> <!-- End of HOME tiles -->

bootstrap_space
bootstrap_space1236×734 257 KB

2

Why? And should it just guess how much space you’d like to have?

3

Because bootstrap gutter width is set automatically to 30px (15px on each side of a column). Isn’t that how bootstrap works?

4

Where’d you get those values, you have a link to the docs?

5

Table in Grid Options

6

I am not a bootstrap expert but it appears the gutter is set using padding rather than margin. Can you try wrapping h3 and p inside another div and apply the border on that div instead?

7

@nibble well that works! Seems like i need to dig deeper into bootstrap, but thank you very much for the solution!

1 Like