0

I'm trying to create spacing between my bootstrap columns, but it doesn't seem to be doing it automatically. Is there a specific way or class that I need to be adding to the columns?

<div class="row row_padding">
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">1</div>
 </div>
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">2</div>
 </div>
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">3</div>
 </div>
</div>
  • you can add padding/margin for individual col-sm-4 – Krishnamoorthy Acharya Apr 19 '18 at 09:14
  • Possible duplicate of https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns or https://stackoverflow.com/questions/30179644/how-to-keep-space-between-three-columns-in-bootstrap – Suresh Ponnukalai Apr 19 '18 at 10:10
  • have you considered learning [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) instead of using table-like markup? – chharvey Apr 19 '18 at 13:54

2 Answers2

1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center bdr">
    <div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#1</div>
    <div class="col-xs-4 w-25 m-1 p-1 border border-secondary">#2</div>
    <div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#3</div>
  </div>
</div>
AG_BOSS
  • 114
  • 10
  • When applies the column system no longer works, I'm unable to have three "col-sm-4" without it dropping onto a new line. –  Apr 19 '18 at 09:27
  • @AG_BOSS do you think you have applied the CSS successfully? Also let us know what is this property `top-margin: 25px;`. I am wondering how this answer got one up-vote. – Suresh Ponnukalai Apr 19 '18 at 10:02
  • OP wants space between each. Just apply border for your div and check it out. – Suresh Ponnukalai Apr 19 '18 at 10:08
  • Please take a look at this screenshot - https://imgur.com/a/fHDN15Q. I've added the code but I need spacing between each white column which doesn't seem to be applying still. –  Apr 19 '18 at 11:54
  • It's exactly the same as you've provided above, just with contained inside a row. –  Apr 19 '18 at 12:14
  • But there is a slight difference, let me see. – AG_BOSS Apr 19 '18 at 12:14
  • @Jordan now check – AG_BOSS Apr 19 '18 at 12:23
  • I found a better solution, this could potentially be better for you as well, see what you think? Update code above. –  Apr 19 '18 at 13:52
0

I think col-md-offset or same like that classes will work for you. :-)

Salman Bukhari
  • 94
  • 10
  • I tried this but it didn't work for me. The class is: col-md-offset-4 –  Apr 19 '18 at 09:23
  • @Jordan col-md-offset should be matched with your column size, let’s say you use col-xs-2 for your div column then you can you col-xs-offset-4 or something that total 12. – Houy Narun Apr 19 '18 at 13:57
  • @salmanwebdevelper it should be col-md-offset-[1-12] and it varied between xs, sm, md, and lg. ;) – Houy Narun Apr 19 '18 at 14:01