Bootstrap 5 column layout with border

Question

I was wondering what the best approach would be to create a 5 column layout in Bootstrap and give those divs a border and spacing.

I've created a new class to make the grid suitable for 5 columns, like so:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

<div class="item col-md-15">
  <div class="item-wrap">
   .....
  </div>
</div>

What I try to do is to give each column 10px margin on the right (except for last column offcourse). Further I want to give each column or item-wrap a 1px border.

Whatever I try I always end up with no margin.

.item {
  border: 1px solid #efefef;
  padding:10px;
}
.item.last {
  margin-right: 0;
}

See my fiddle

Bootstrap is based on a 12 column grid, so what's with col-xs-15, col-sm-15, col-md-15, and col-lg-15? — j08691, Dec 23 '15 at 17:03
@j08691 he made his own classes. He mentioned this above in the OP (possibly as an update?). — Drew Kennedy, Dec 23 '15 at 17:20
@DrewKennedy - Even though he created his own classes I don't see how it fits in with Bootstrap's framework. — j08691, Dec 23 '15 at 17:23
@j08691 The number `15` chosen is a weird one, but Bootstrap doesn't offer 20% widths through the col design, so I can understand extending the framework to fill requirements. This site is actually where the code above was likely borrowed from: http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/ — Drew Kennedy, Dec 23 '15 at 17:28
best solution: [bootstrap 5 column layout](https://stackoverflow.com/questions/31944691/bootstrap-5-column-layout?answertab=votes#tab-top) — Mahdi Afzal, Aug 22 '17 at 07:07

score 2 · Answer 1 · answered Dec 23 '15 at 17:30

Currently, 5, 7 and 9 column layouts are not supported in native Bootstrap, as the default 12 column structure isn't evenly divisible by those numbers. In order to get a 5 column layout, you would need to visit http://getbootstrap.com/customize/#grid-system and modify the @grid-columns value to 15 (or really, anything that is evenly divisible by 5).

After customizing and downloading your personal version of Bootstrap, you could then implement a 5 column layout using:

<div class="col-xs-3">Column 1</div>
<div class="col-xs-3">Column 2</div>
<div class="col-xs-3">Column 3</div>
<div class="col-xs-3">Column 4</div>
<div class="col-xs-3">Column 5</div>

And you wouldn't have to mess with CSS to try and mimic the existing Bootstrap classes and styles. Just be cautious using this approach, as any existing columnar layouts may be affected by this change.

score 0 · Answer 2 · answered Dec 23 '15 at 17:16

If you want to give all columns a margin for spacing, you can use pseudo classes to achieve this:

.item:not(:last-child) {
    margin-right:10px;
}

Basically this will give all elements with the .item class a right margin, except for the last element. Here is your updated fiddle.

score 0 · Answer 3 · answered Apr 04 '20 at 21:54

With the release of bootstrap-4, we saw lots of new features and changes it came up with. One such change was dropping floats and percentages, and using the flex-box for layouts in bootstrap-4.

Bootstrap-4 is built on top of the flex-layout.

So whenever we have such a requirement where our layout is not fitting to the usual 12-grid layout of our bootstrap-4 ,we can use our customized CSS (using flexbox properties) to create any number column responsive layout(in your case which is a 5 column layout), since flexbox gives us so much flexibility in doing so. Use the below code that I've wrote to achieve this.

HTML5:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" href="./style.css" />
   <title>5 column layout in flexbox</title>
</head>

<body>
 <main class="flex-container">
  <div class="flex-item col1">col1</div>
  <div class="flex-item col2">col1</div>
  <div class="flex-item col3">col3</div>
  <div class="flex-item col4">col4</div>
  <div class="flex-item col5">col5</div>
 </main>
</body>
</html>

CSS:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 padding-top: 1rem;
}

/* --- This much code will do it for you --- */
.flex-container {
  display: flex;
 }

.flex-item {
  min-height: 400px;
  border: 4px solid #03a503;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.flex-item:first-of-type,
.flex-item:last-of-type {
  margin-right: 1rem;
}

 /* ----- Basic break-point ----- */
@media screen and (max-width: 768px) {
 .flex-container {
   flex-direction: column;
 }

.flex-item {
  min-height: 100px;
  margin: 0.5rem;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
   margin: 0.5rem;
 }
}

Here is the full code https://jsfiddle.net/cLmq0otv/3/

Hope this code solves the problem.

score 0 · Answer 4 · answered Apr 04 '20 at 23:22

You have to use Auto-layout columns, column classes without an explicit numbered. You may use predefined grid classes, grid mixins, or inline widths to set the width of one column and have the sibling columns automatically resize.

.col{
padding:1rem;
}
.col div{
  border:1px solid red;
  min-height:5rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col">
      <div>content column 1</div>
    </div>
    <div class="col">
      <div>content column 2</div>
    </div>
    <div class="col">
      <div>content column 3</div>
    </div>
    <div class="col">
      <div>content column 4</div>
    </div>
    <div class="col">
      <div>content column 5</div>
    </div>
  </div>
</div>

Bootstrap 5 column layout with border

4 Answers4