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>
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>
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>
I have this code:
.banner {
background: #f9f9f9;
width: 300px;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
<div class="container">
<div class="d-flex justify-content-between">
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
</div>
</div>
</section>
I need on mobile and tablets display: block these elements banner with spacing. How I can do it with flex? Now I get elements on inline.
Based on viewport you could use this d-* classes
So this
<div class="d-flex justify-content-between">
would be
<div class="d-lg-flex justify-content-between">
This will make .banner block(the default behavior of div) till large viewport
You can change the direction on small screen (https://getbootstrap.com/docs/4.2/utilities/flex/#direction)
.banner {
background: red;
border:1px solid;
min-height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
<div class="container">
<div class="d-flex flex-column flex-sm-row justify-content-between">
<div class="banner col m-2"></div>
<div class="banner col m-2"></div>
<div class="banner col m-2"></div>
</div>
</div>
</section>
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>
How to place a container (two rows) with two containers (in two different rows) in bootstrap?enter image description here
i want containers arranged like this
You can use grid to do these kind of things.
Can you Illustrate what should it look like?(I could help you more then)
EDIT:
For this you actually need just a row with two columns.
And it will look like this:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
You content here
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
Your content here
</div>
</div>
If you need so that the content inside of those columns is also a grid, then it will be a bit different:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
</div>
Use this code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.gray{border:5px solid gray;
height: 100px;
}
.green{border: 5px solid green;
height: 300px;
}
.orange{
border: 5px solid orange;
height: 350px;
}
.greenplus{border: 5px solid green;
height: 50px;
}
</style>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row" >
<div class="col-lg-8 col-sm-8 col-md-8">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="gray"></div>
<br>
<div class="green"></div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="orange"></div>
<br>
<div class="greenplus"></div>
</div>
</div>
</div>
</div>
</body>
</html>