Bootstrap columns with items with margin

HTML & CSS
1

Hi there,

I am trying to create a row of 3 items or more that will shift down responsively.

I currently have the following which works:

They shift down ok, but I am having trouble getting margins on the right hand side of the inner items, so there is equal spacing between them, but also having the left and right ones align to the edges, if that makes sense ? :upside_down_face:

Can anyone help me add spacing to the items?

Many thanks

2

Bootstrap provides a full gutter system by default. You just need to build your boxes inside the columns rather than using the columns.

You can over-ride the bootstrap controls but you will need to also mimic the media queries for the over-ride.

If you replace this CSS to your fiddle it will do what you want.

.local-items {
  justify-content: space-between;
}

.local-items .item {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 25px;
}

.local-items .item:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (min-width:768px) {

  .local-items .item {
    max-width: calc(50% - 10px);
    margin:10px 0;
  }

}

@media screen and (min-width:992px) {

  .local-items .item {
    max-width: calc(33.3333% - 10px);
  }

}

Assuming of course I understood what you wanted :slight_smile:

The problem with this approach is that you are working against bootstrap and not with it.

Note that you should not remove the margins from .row because .row contains negative margins to offset the padding on the container. This is an integral part of the bootstrap gutter system.

In the end you can do what you like but why use a framework if you are going to roll your own code:)

1 Like
3

Hi @PaulOB,

Many thanks for the reply.

Yes, that has worked :slight_smile: thank you.

I think I do need to give the row a margin: 0 to bring it back in line with the padding on my container wrapper and other elements.

I will have a play with the margins and calcs

Thanks again!

1 Like
4

To clarify the above point you could build the page like this using an element inside the col class to preserve the native bootstrap gutters and avoid over-riding and creating more media queries.

The CSS becomes simpler:

.item {
  margin-bottom: 20px;
  display: flex;
}

.local-items .mybox {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.local-items .mybox:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

Then the html looks like this:

<div class="container local-information">
  <div class="row local-items">
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox"> Item 1<br>
        second Line </div>
    </div>
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox">item 1</div>
    </div>
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox">item 1</div>
    </div>
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox">item 1</div>
    </div>
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox">item 1<br>
        Line 2<br>
        Line 3</div>
    </div>
    <div class="col-lg-4 col-md-6 item">
      <div class="mybox">item 1</div>
    </div>
  </div>
</div>


(Open in codepen to see full size.)

1 Like
5

Thanks, yes I think that has worked better and saved the gutters :slight_smile:

Your example has the spacing and aligns perfectly to the rest of the elements.

Thanks again!

1 Like
6

Hi,

It’s me again :confused:

I am having some trouble with adding span tags inside the mybox class. If the text is too long, it is breaking out of the container. This seems to be when on desktop

I have read that flex-shrink may be able to fix this, but I haven’t managed to work it out.

Do you know how I would stop the span tags from breaking out?

This is the updated pen:

7

Sorry my mistake change the auto to 0% here.

.local-items .mybox {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex: 1 0 0%;
}
1 Like
8

Awesome, thank you that worked great :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.