Why is align-content: space-around not working here? What is the fix? Need to align columns 3 and 4 to bottom.
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
Fiddle - https://jsfiddle.net/afelixj/y9perjhf/
Your row has auto height - add height: 100% or h-100 class to it - see demo below:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around h-100">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to create a layout like following using bootstrap 4.
Following is my JSFiddle and I think the approach I have taken is incorrect and there's a better way of doing this. And also there are responsive issues.
JSFiddle
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100 ">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col-10 col-sm-10 col-md-8 col-lg-8 col-xl-8 red">
Background image
</div>
</div>
</div>
bootstrap grid has 12 column and your total was coming to 14. I have added
col-sm-4 to yellow div and col-sm-8 to red div.
refer below link for more details. thanks
https://getbootstrap.com/docs/4.1/layout/grid/
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100 ">
<div class="row justify-content-center h-100">
<div class="col-sm-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8 red">
Background image
</div>
</div>
</div>
Bootstrap columns must add up to 12, yet yours add up to 14 for some viewports.What you probably want is to have one column at 4 and one at 8:
.left, .right {
height: 100vh;
}
.left {
background: yellow;
}
.right {
background: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-4 left"></div>
<div class="col-8 right"></div>
</div>
The better option is to just use .col for the red region so that it occupies the remaining width.
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col red">
Background image
</div>
</div>
</div>
I'm trying to make a simple webpage with header and footer using bootstrap 4, the problem is that the footer won't show in the end of the page.
here is my html, please can anyone tell me what to do.
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
Please try it:
html, body {
height: 100%;
}
.appbox {
display: flex;
flex-wrap: wrap;
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
min-height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start w-100">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end w-100">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
You are using bootstrap classes in a wrong way. First you appbox is not having height:100% and align-items-* should be used with a flex container to align items inside not with the element you want to align.
You can correct your code like below without adding any external CSS (https://getbootstrap.com/docs/4.2/utilities/flex/)
html,
body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- you make this 100% height and a flex container with colmun direction -->
<div class="container appbox h-100 d-flex flex-column">
<div class="row">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<!-- you use margin-top:auto to push footer at the bottom -->
<div class="row mt-auto">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
Are you looking this kind of View ? then please check
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="wrapper">
<div class="container">
<header class="hero-unit">
<h1>Header</h1>
<p>It's really <strong>not</strong> that hard, y’know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
</header>
</div>
<div class="push"><!--//--></div>
</div>
<footer>
<div class="container">
<p>Put together in less than five minutes by Martin Bean. Uses Twitter Bootstrap and Ryan Fait’s Sticky Footer.</p>
</div>
</footer>
Hope this helps.. thanks
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
.footer{
position:absolute;
bottom:0;
right:0;
left:0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end footer">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
I want to scale the below image to the height of the header. Can anyone please tell me why it is not working?
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
img {
max-height: 100%;
max-width: 100%;
}
.scaleableImage {
height: 100%;
width: auto;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<style type="text/css">
</style>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I've adjusted your CSS with the main changes being the following.
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
This limits the row class within the header to a max height of 100%. As you set #header to 10%, row will stay within that height. Also, padding set on col-2 was preventing the image from using the full space. Add padding back as you see fit, but keep in mind that it will shrink the image accordingly if the col class width is reduced. Below is a working example.
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I want to divide my div "tile-container" with the width of 100% into 5 equal pieces. I thought that creating 5 divs inside with the width of 25% would solve the problem but it didn't. Container seems to be to small. Here is my code:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</div>
</div>
</body>
And stylsheet.css file:
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
The problem is with the spacing in the html between the divs, to ignore the spacing you can add font-size:0 to the .tile-container, then use a specific font-size to the .tile :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
font-size:0; /* add */
}
.tile{
font-size:20px; /* or whatever you want */
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Another method would be to comment out the spaces :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div><!--
--><div class="tile">B</div><!--
--><div class="tile">C</div><!--
--><div class="tile">D</div><!--
--><div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
I am using boostrap to make a masonry layout. But I am having a problem. As you can see in my code, I have 5 divs. I want Div 4 and 5 to move up(check the attached image) but I have no idea how to do it. I can do it with margin-top but it will break the responsive layout. So, what's the possible solution for this? I am a newbie, it will be a great help. Thanks in advance.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
}
.div2{
border: 2px solid;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The current layout is:
But I want it like this:
In this specific case you can use nesting..
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6 div1">Div1</div>
<div class="col-md-6 div2">Div2</div>
<div class="col-md-12 div4">Div4</div>
<div class="col-md-12 div5">Div5</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 div3">Div3</div>
</div>
</div>
</div>
</div>
Or, use pull-right on div3...
<div class="col-md-12">
<div class="row">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3 pull-right">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
</div>
Demo of both solutions
If you want to use Masonry, see my answer for Bootstrap Masonry solutions.
It wouldn't be masonry, per say, but from your image what you want is
<div class='row'>
<div class='col-md-8'>
<div class='row'>
<div class='col-md-6 div1'>Div1</div>
<div class='col-md-6 div2'>Div2</div>
<div class='col-md-12 div4'>Div4</div>
<div class='col-md-12 div5'>Div5</div>
</div>
</div>
<div class='col-md-4 div3'>Div3</div>
</div>
you can do it this way:
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
height: 40px;
}
.div2{
border: 2px solid;
height: 40px;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
height: 40px;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="container-fluid">
<!-- add extra container element for Masonry -->
<div class="grid">
<div class="grid-sizer col-xs-4"></div>
<div class="grid-item col-xs-4 div1"></div>
<div class="grid-item col-xs-4 div2"></div>
<div class="grid-item col-xs-4 div3"></div>
<div class="grid-item col-xs-8 div4"></div>
<div class="grid-item col-xs-8 div5"></div>
</div>
</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>