5 columns bootstrap mixin

In this example below you will see how to do a 5 columns bootstrap mixin with some HTML / CSS and Javascript

Sass mixins to make a 5 columns row in the Bootstrap way

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>5 columns bootstrap mixin</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  
  <h1>5 columns bootstrap mixins (sass)</h1>

  <h2>5 columns row</h2>
  <div class="row">
    <div class="col">
      <p>1</p>
    </div>
    <div class="col">
      <p>2</p>
    </div>
    <div class="col">
      <p>3</p>
    </div>
    <div class="col">
      <p>4</p>
    </div>
    <div class="col">
      <p>5</p>
    </div>
  </div>

  <h2>Offset 2 columns</h2>
  <p>The third col has a 2 col offset.</p>
  <div class="row">
    <div class="col">
      <p>1</p>
    </div>
    <div class="col">
      <p>2</p>
    </div>
    <div class="col col-offset">
      <p>3</p>
    </div>
  </div>

  <h2>Push and pull 3 columns</h2>
  <p>The first col is push by 3 col and the fourth one is pull by 3.</p>
  <div class="row">
    <div class="col col-push">
      <p>1</p>
    </div>
    <div class="col">
      <p>2</p>
    </div>
    <div class="col">
      <p>3</p>
    </div>
    <div class="col col-pull">
      <p>4</p>
    </div>
    <div class="col">
      <p>5</p>
    </div>
  </div>

</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/5-columns-bootstrap-mixin-EPZMvZ */
.container {
  width: 80%;
  margin: auto;
}
.container .row:before, .container .row:after {
  content: " ";
  display: table;
}
.container .row:after {
  clear: both;
}

.col {
  position: relative;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  line-height: 100px;
  text-align: center;
}
@media (min-width: 768px) {
  .col {
    float: left;
    width: 20%;
  }
}
.col:nth-child(even) {
  background: #9a9a9a;
}
.col:nth-child(odd) {
  background: #676767;
}

@media (min-width: 768px) {
  .col-offset {
    margin-left: 40%;
  }
}

@media (min-width: 768px) {
  .col-push {
    left: 60%;
  }
}

@media (min-width: 768px) {
  .col-pull {
    right: 60%;
  }
}

Comments