I am trying to figure out how to achieve the layout below with bootstrap.
Here is my code so far. I do not find a solution to put the blocks below the first cols...
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div style="height: 905px; background-color: blue;"></div>
</div>
<div class="col-sm-6">
<div style="margin-top: 200px; height: 305px; background-color: blue;"></div>
<div class="row">
<div class="col-sm-6">
<div style="margin-top: 30px; height: 370px; background-color: blue;"></div>
</div>
<div class="col-sm-6">
<div style="margin-top: 30px; height: 1000px; background-color: blue;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">
</script></body>
The desired layout is:
In the next code you can see the layout. You have to know that the :before styles are just to show you how it see. This example isn't made thinking responsive, if you want it works on mobile and table devices, you have to edit it.
Another thing is that the sixth box is out of the container, if the screen has little with, this box won't see complete.
I give to all boxes a fixed heigh to test it see like the picture.
.container {
max-width: 80%;
}
.container .red:before,
.container .red2:before {
background-color: red;
content: "";
display: block;
margin-bottom: 15px;
}
.container .red:nth-child(1):before {
height: 200px;
}
.container .red:nth-child(2):before {
margin-top: 30px;
}
.container .red2:before,
.container .red:nth-child(2):before,
.container .red:nth-child(5):before,
.container .red:nth-child(7):before {
height: 80px;
}
.container .red:nth-child(3):before {
height: 75px;
}
.container .red:nth-child(4):before {
height: 265px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-6 red"></div>
<div class="col-xs-6 red"></div>
<div class="col-xs-3 red"></div>
<div class="col-xs-3 pull-right red"></div>
<div class="col-xs-8 col-xs-offset-1 red"></div>
<div class="col-xs-5">
<div class="red2" style="margin-left: -20%;"></div>
</div>
<div class="col-xs-4 red"></div>
</div>
Related
I have a problem regarding the following layouts
.box1 {
background: green;
height: 80px;
}
.box2 {
background: red;
height: 270px;
}
.box3 {
background: blue;
height: 200px;
}
.box4 {
background: yellow;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<h1>Layout 1</h1>
<div class="container">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box4">box4</div>
</div>
</div>
<hr />
<h1>Layout 2</h1>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box1">box1</div>
<div class="box3">box3</div>
</div>
<div class="col-md-4">
<div class="box2">box2</div>
<div class="box4">box4</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
Both are correct in some way and wrong in others
Layout 1 stacks the columns in the correct order (box1,2,3,4) on mobile screens,
but on desktop screens there are undesired gaps between the content due to different content sizes. This is the current layout I am working with.
Layout 2 does not show the gaps of layout 1, but the columns do not stack correctly (box1,3,2,4).
I understand why both layouts behave the way they do.
How can you create a layout that combines the desired results of both layouts using bootstrap or plain css? (note that the project I am working on uses an older version of bootstrap).
Thanks
Edit
The box heights can vary from page to page. I have just set them in a way that illustrates the problem.
It is dirty but I managed it this way:
#media (min-width: 992px){
.layout-1 .box3{
margin-top: -190px;
}
.layout-1 .box4{
float:right;
}
}
I am still searching for something nicer.
DEMO
.box1 {
background: green;
height: 80px;
}
.box2 {
background: red;
height: 270px;
}
.box3 {
background: blue;
height: 200px;
}
.box4 {
background: yellow;
height: 100px;
}
/*** ADDED ***/
#media (max-width: 991px){
.layout-3 .row:first-child{
display:flex;
flex-direction: column;
}
.layout-3 .box1{order:1;}
.layout-3 .box2{order:2;}
.layout-3 .box3{order:3;}
.layout-3 .box2{
position: relative;
}
}
#media (min-width: 992px){
.layout-1 .box3{
margin-top: -190px;
}
.layout-1 .box4{
float:right;
}
.layout-3 .row{
position: relative;
}
.layout-3 .box2{
position: absolute;
top: 0;
right: 0;
}
.layout-3 .box4{
float:right;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<h1>Layout 1</h1>
<div class="container layout-1">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box4">box4</div>
</div>
</div>
<hr />
<h1>Layout 2</h1>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box1">box1</div>
<div class="box3">box3</div>
</div>
<div class="col-md-4">
<div class="box2">box2</div>
<div class="box4">box4</div>
</div>
</div>
</div>
<h1>Layout 3</h1>
<div class="container layout-3">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-4 box4">box4</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
I made an example to represent my current issue.
I want this structure. I tried height: 100% on the blue part but it didn't work, so I gave height: 80vh.
This is an issue because nothing is aligned anymore and gets worse if you make the windows smaller or bigger (not responsive).
How do I make the left and right side of the content aligned at the top and bottom with a margin-top of 5px to the black part?
.red {
background: red;
}
.blue {
background: blue;
height: 80vh;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- 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">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
I tackled something similar to this and whipped up a jQuery solution to it that you might want to try, it's been working great for me.
Basically the function gets the height of the column you know is going to be the tallest. If that content is larger than the others it sets the height of the others to the same of the taller piece of content.
$(document).ready(function () {
var tallest = $(".red").height();
var shortcolumn1 = $(".blue").height();
if (tallest >= shortcolumn1) {
$(".blue").css("height",""+ tallest +"px");
$(".green").css("height",""+ tallest +"px");
}
else {
}
});
Change CSS, Your Footer height 25px;
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- 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">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
add display:flex for the main row, min-height:100% for the col-xs-6 and height:100% for the blue box the code should look like:
.red {
background: red;
}
.blue {
background: blue;
height: 100%;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
.d-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mh-100{
min-height:100%;
}
<!-- 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">
<div class="container">
<div class="row d-flex">
<div class="col-xs-6 mh-100">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6 mh-100">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
I want to create progress bar as in below image.
I do not know how to create this. Any help would be appreciated.
Here's a way to do it with Bootstrap:
.bar-step {
position: absolute;
margin-top: -20px;
z-index: 1;
font-size: 12px;
}
.label-txt {
float: left;
}
.label-line {
float: right;
background: #000;
height: 50px;
width: 1px;
margin-left: 5px;
}
.label-percent {
float: right;
margin-left: 5px;
}
<head>
<link href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="row"><br>
<div class="col-xs-12">
<div class="progress">
<div class="bar-step" style="left: 100%">
<div class="label-txt">Level 3</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Level 1</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Testing 123</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="progress-bar progress-bar-success" style="width: 46%;"></div>
</div>
</div>
</div>
</div>
</body>
Credit goes to timgomm https://bootsnipp.com/snippets/1KnKq
NOTE: I am just guessing the percentages - you will need to edit the percentages in the inline styles to suit you.
I have an image I am trying to replicate as seen in the image. I am trying to use bootstrap to limit the CSS.
The image I am copying is this
I have being trying to wrap my head around it but can't seem to figure it out. Below is an example of the code I have so far
<div class = "container col-md-offset-2">
<div class="row">
<div class="col-md-8 ">
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
</div>
<div class="col-md-4 well"><img class = "img-responsive" src=""></div>
</div>
</div>
.banner_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 36px;
}
.banner_wrapper {
background: lightgreen;
height: 250px;
}
.left_wrapper_block {
height: 150px;
padding: 30px;
margin: 10px 0;
background: lightblue;
}
.right_wrapper_block {
padding: 30px;
margin: 10px 0;
background: lightyellow;
height: 310px;
}
<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>
<div class="container">
<div class="row">
<div class="col-md-12 banner_wrapper">
<p class="banner_text">Latest News</p>
</div>
</div>
<div class="row">
<div class="col-md-6 left_wrapper">
<div class="left_wrapper_block">
<p>Resources</p>
</div>
<div class="left_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
<div class="col-md-6 right_wrapper">
<div class="right_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
</div>
</div>
I'm trying to get this result with boostrap :
The idea would be that : the black square stay as a square, even with the right "rows" being resized (on mobile for example)
And the red rows would be having the same height/width (I failed that on the image, just a quick paint mockup)
I'd love to show you some code that would be a starting point but after a few hours I'm unable to achieve this effect...
I found that template that use this kind of structure :
Gridus
Using flexbox as a wrapper.
* {
box-sizing: border-box;
}
.flexbox {
display: flex;
justify-content: left;
align-items: flex-start;
}
.col-md-10 {
border: thin solid darkgray;
max-height: 50px;
overflow: hidden;
height: 50px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row nopadding flexbox">
<a href="#">
<div class="col-md-4 vc-photo photo-01"><img src="http://placehold.it/150" /></div>
</a>
<div class="col-md-8 nopadding">
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
</div>
</div>
You mean something like this? I didn't bother with the borders, but I can put it if you like
.left-div {
background-color: pink;
height: 120px;
width: 120px;
float:left;
}
.right-div {
background-color: red;
height: 120px;
float:left;
}
.col-xs-12{
height: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="left-div">Column 1</div>
<div class="right-div">
<div class="row">
<div class="col-xs-12">Row 1</div>
<div class="col-xs-12">Row 2</div>
<div class="col-xs-12">Row 3</div>
</div>
</div>
</div>
</div>