Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Bootstrap 5 columns</title>
</head>
<body class="container">
    <h1>Bootstrap 5 columns</h1>
    <h4>Accepted <a href="http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap">answer</a> version:</h4>
<div class="row">
    <div class="col-md-2 col-md-offset-1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec erat augue. Nulla facilisi</div>
    <div class="col-md-2"><img src="http://placehold.it/100x100"/>Proin erat ante, vulputate at velit non, malesuada pulvinar quam</div>
    <div class="col-md-2"><img src="http://placehold.it/100x100"/>Nulla molestie turpis eu euismod semper.</div>
    <div class="col-md-2"><img src="http://placehold.it/100x100"/>Cras sollicitudin mauris eu dolor sollicitudin posuere</div>
    <div class="col-md-2"><img src="http://placehold.it/100x100"/>Duis ac diam nunc</div>
</div>
    
​
    <h4>Some cool solution (works for any number of cols):</h4>
    <div class="flexrow">
        <div><img src="http://placehold.it/100x100"/><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec erat augue. Nulla facilisi</span></div>
        <div><img src="http://placehold.it/100x100"/><span>Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam Proin erat ante, vulputate at velit non, malesuada pulvinar quam</span></div>
        <div><img src="http://placehold.it/100x100"/><span>Nulla molestie turpis eu euismod semper.</span></div>
        <div><img src="http://placehold.it/100x100"/><span>Cras sollicitudin mauris eu dolor sollicitudin posuere</span></div>
            <div><img src="http://placehold.it/100x100"/><span>Duis ac diam nunc</span></div>
    </div>
</body>
</html>
 
.container {
    background: #f5f5f5;
}
​
.container > div {
    background: #e8e8e8;
}
​
.container > div > div{
    background: #dadada;
}
​
img {
    margin: 3px;
}
​
/*   flexrow  */
​
.flexrow {
    display: flex;
    flex-direction: column;
}
.flexrow > * {
    margin: 3px;
    display: flex;
    flex: 1;
    align-items: center;
}
​
@media (min-width: 990px) {
    .flexrow {
      display:flex;
        flex-direction: row;
    }
    .flexrow > * {
      display:block;
        flex-direction: column;
        justify-content: flex-start;
    }
    .flexrow img {
      display:block;
        margin-left: auto;
        margin-right: auto;
    }
    .flexrow > * > :not(img) {
        flex: 1 1 auto;
    }
}
​
​
/* just for styling */
​
:nth-child(1) > img { -webkit-filter: sepia(50%) }
:nth-child(2) > img { -webkit-filter: sepia(100%) brightness(50%)}
:nth-child(3) > img { -webkit-filter: invert(100%) sepia(100%) }
:nth-child(4) > img { -webkit-filter: invert(100%) sepia(20%)}
:nth-child(5) > img { -webkit-filter: invert(100%) }
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ci11pro
0viewers