Responsive layout with nested divs using bootstrap
Here my html code
<div class="container-fluid" style="height: 350px;">
<div class="row-fluid clearfix" style="height: 100%">
<div class="col-md-9 column" style="height: 100%;">
<div class="row clearfix" style="height: 50%;">
<div class="col-md-4 column" style="height: 100%;background-color: red">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: green">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: blue">
</div>
</div>
<div class="row clearfix" style="height: 50%;">
<div class="col-md-12 column" style="height: 100%;background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="height: 100%;background-color: yellow">
</div>
</div>
</div>
output:
while increasing the browser screen width
here the output after increasing
here green and blue colored div missing
my expected output:
Please help me out..
You need to define classes for mobile view as well, otherwise elements can overlap each other. For example:
col-xs-12 col-md-4 column
See the bootply
This is working now, remove clearfix class from row. here is the code
<div class="container-fluid" style="height: 350px;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row-fluid clearfix">
<div class="col-md-9 column">
<div class="row">
<div class="col-md-4 column" style="height: 150px;background-color: red">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: green">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: blue">
</div>
</div>
<div class="row">
<div class="col-md-12 column" style="height: 150px; background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="background-color: yellow; height: 300px">
</div>
</div>
</div>
Dileep Kumar Hi there, I striped out most of your code to what is probably only needed.
See if this works for you.
This code has the pink block nest up with the others.
Here is the large view Fiddle. Easier to resize.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 5%;
margin-bottom: 5%;
}
.block-a {
height: 350px;
}
.block-b {
height: 175px;
}
.block-red {
height: 175px;
background-color:#ff1000;
}
.block-darkgreen {
height: 175px;
background-color: green;
}
.block-blue {
height: 175px;
background-color: blue;
}
.block-pink {
height: 175px;
background-color: pink;
}
.block-darkyellow {
height: 350px;
background-color: gold;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container-fluid">
<div class="row-fluid col-md-9 block-a">
<div class="col-xs-12 col-sm-12 col-md-4 block-red"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-darkgreen"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-blue"></div>
<div class="col-xs-12 col-sm-12 col-md-12 block-pink"></div>
</div>
<div class="row-fluid col-md-3 block-a">
<div class="col-xs-12 col-sm-12 col-md-12 block-darkyellow"></div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Well of course the red one will be shown, because you have specified the height of the parent div as 50% and all the three children with height of 100% so the red div, which is the first one, will take up all the height. One solution would be to specify a height of 33.33% on the three divs, when the breakpoint is reached, like:
#media(max-width: 767px) {
.col-md-9 .col-md-4 {
height: 33.33%;
}
}
I'd put some more specific classes to the divs before doing this.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
height: 64px;
background-color:pink;
}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div style="width: 100%">
<span>Xyz</span>
<span>sjfoeij</span>
</div>
<div class="row a">
<div class="col-12 col-md-8 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row a">
<div class="col-12 col-md-8 ab" >
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b" >
<span>11</span>
</div>
</div>
</li>
</ul>
</body>
</html>
How can I display all the values at the center of the row?And the div with spans value Xyz is not taking width same as row below it.And also the second row is not taking width same as row above?
How can I achieve that using bootstrap and Css. Can we add two li and a row inside li or we will have to add container as well inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
height: 80px;
text-align: center;
padding-top: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-sm-6" >
<p>mwiiwiw</p>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;">
<span class="b">XYZ</span>
</div>
<div class="col-sm-4 b"style="background-color: yellow;" >
<span>Sjfoeij</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: blue;">
<span class="b">ABC</span>
</div>
<div class="col-sm-4 b"style="background-color: red;" >
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;" >
<span class="b">ABC</span>
</div>
<div class="col-sm-4" style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</body>
</html>
As per your comment #irkhaladkar below is the code snippet:
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
/*height: 64px;
background-color:pink;*/
}
.pink{background:pink;}
.h-64{height:64px}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div class="row pink">
<span class="col-12 col-md-6">Xyz</span>
<span class="col-12 col-md-6">sjfoeij</span>
</div>
<div class="row h-64">
<div class="col-12 col-md-6 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-6 ab"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row h-64 pink">
<div class="col-12 col-md-6 ab" >
<span class="">ABC</span>
</div>
<div class="col-12 col-md-6 ab" >
<span>11</span>
</div>
</div>
</li>
</ul>
I am working with Bootstrap 3 and need to make a banner inspired of this page.
I have made this until now: Codepen.
The picture is not responsive. I can make the picture responsive if i add the class img-responsive to the img src tag, but then this happens.
How can I make the picture responsive, and make the box float on top of the picture on all screensizes?
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/container-->
Added a new relative (container for image) and absolute(container for panel) div div and removed unnecessary classes.
.abc {
position: relative;
}
.def {
position: absolute;
top: 30px;
right: 20px;
max-width: 300px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>
.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}
#media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
img.img-responsive {
height: 200px;
}
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" />
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>
add this css to your div "col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm"
padding-top: 40px;
position: absolute;
top: 0;
right: 5%;
and place it like this
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
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>
So I am using Bootstrap panels for my project and I have the design mockup as below:
The Profile text and progress bar should be left aligned while the collapse icon should be right aligned.
This is my markup at the moment:
<div id="panelProfile" role="tab" class="panel-heading">
<h4 class="panel-title">Profile</h4>
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
I tried adding float to both profile text and progress bar but this gives me this:
What is the best way to handle this without declaring expicit values?(Need to be responsive)
Have you tried using a div.row within your div#panelProfile?
<div id="panelProfile" role="tab" class="panel-heading">
<div class="row">
<div class="col-xs-2">
<h4 class="panel-title">Profile</h4>
</div>
<div class="col-xs-8">
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
This code will perfectly work for you.
Add pull-right class in Minus Icon.
Add Pull-left class in Profile
To make View Complete Profile "center" add text-center class
Happy Coding :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.progress{
border-radius: 15px;
}
.circle-minus{
width: 5px;
height: 3px;
border: 1px solid black;
border-radius: 50%;
padding: 1px 7px;
font-size: 14px;
}
.panel-heading{
background-color: white ! important;
}
.panel-footer{
background-color: white ! important;
}
body{
padding-top: 15px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right"> 50% <span class="circle-minus">-</span></div>
<div class="pull-left">Profile </div>
<div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</div>
</div>
<div class="panel-body" style="height: 250px;"></div>
<div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to do is make my responsive-width divs have a transition when they lose their percentage width, so that there isn't so much of an abrupt jump. For instance, when the screen of a page with
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
</div>
goes below 992px, the 4 inner divs lose their width:25%; property and in fact have no width property. When this happens, I want a smooth transition into their new width (which spans their containing div).
What I tried is
<div class="row">
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
</div>
where the class I made called transition-width is defined by
.transition-width { transition: width 1s ease-out; webkit-transition: width 1s ease-out; }
but for some reason there isn't any transition when I toggle over the breakpoint. Any idea why this is? What do I need to do instead to achieve my goal?
Have a look at this sample code, when you resize the window you will see the transition as expected. Is this what you were trying to get?
When you use all col-xx-xx you will always get the percentage width you want... like this class="col-xs-3 col-sm-3 col-md-3".
In this demo the bottom row divs always has a width of 25%.
Reality here is that a general user opens a website on a device and that screen is what it is, the user would not see this transition effect.
I set a media breakpoint at 892px to test at.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.bg-orange {
background-color: orangered;
}
.bg-green {
background-color: greenyellow;
}
.bg-violet {
background-color: blueviolet;
}
.transition-width {
transition: width 10s ease-out;
webkit-transition: width 10s ease-out;
}
#media(min-width:892px) {
div{width:100%;}
}
#media(max-width:892px) {
div{width:100%;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12"><br><br></div>
<div class="container col-lg-12">
<h3>Transition when resized.</h3>
<div class="row">
<div class="col-md-3 bg-primary">
...
</div>
<div class="col-md-3 bg-orange">
...
</div>
<div class="col-md-3 bg-violet">
...
</div>
<div class="col-md-3 bg-green">
...
</div>
</div>
<div class="container col-lg-12"><br><br></div>
<div class="row">
<div class="col-md-3 bg-primary transition-width">
...
</div>
<div class="col-md-3 bg-orange transition-width">
...
</div>
<div class="col-md-3 bg-violet transition-width">
...
</div>
<div class="col-md-3 bg-green transition-width">
...
</div>
</div>
<div class="container col-lg-12"><br><br></div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 bg-primary">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-orange">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-primary">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-orange">
...
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>