CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Meules
Meules

Reputation: 1389

Bootstrap 5 column layout with border

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.

enter image description here

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

Upvotes: 2

Views: 5289

Answers (4)

PoseLab
PoseLab

Reputation: 1899

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>

Upvotes: 0

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

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.

Upvotes: 0

Tim Lewis
Tim Lewis

Reputation: 29278

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.

Upvotes: 2

Drew Kennedy
Drew Kennedy

Reputation: 4168

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.

Upvotes: 0

Related Questions