My code is bellow:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
</div>
I want to use a content which Width is suppose 400px & Height: 300px at 1st row/1st column
I want to use a content which Width is 400px & Height: 600px at 1st row/2nd column
I want to use a content which Width is 400px & Height: 300px at 2nd row.
I want that 2nd content, which width: 400px & Height: 600px will display upto 2nd Row
This is what you can do with bootstrap:
http://www.codeply.com/go/KaIvNu7qCT
Look at snippet:
.wrp1 {
background: orange;
height: 25vw;
}
.wrp2 {
background: teal;
height: 25vw;
}
.wrp3 {
background: tomato;
height: 50vw;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 wrp1">content1</div>
<div class="col-xs-12 wrp2">content2</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 wrp3">content3</div>
</div>
</div>
</div>
</div>
Related
I have one container with full width (container-fluid) and card-desk inside it I have one vertical column and 2 rows, one with 3 columns and another one with 2 columns. The problem is that my image moved out ( flows out) from my div col, I used overflow-hidden, but it doesn't help. I used Cards, but also nothing at all. In CSS I add img{ width:100%; height:auto} no result again.It must be responsive so I can't use custom height and width.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid overflow-hidden">
<div class="card-deck">
<div class="row">
<div class="col-xl-3 col-md-3 col-12">
<img src="https://www.artgalleryofhamilton.com/wp-
content/uploads/2018/04/abstract-painting.jpg"class="card-img img-
fluid"/>
</div>
<div class="col-xl-9 col-md-9 col-12">
<div class="row">
<div class="col-xl-4 col-md-4 col-12">
<img src="https://www.adorama.com/alc/wp-
content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card-
img img-fluid"/>
</div>
<div class="col-xl-4 col-md-4 col-12">
<img src="https://www.adorama.com/alc/wp-
content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card-
img img-fluid"/>
</div>
<div class="col-xl-4 col-md-4 col-12">
<img src="https://www.adorama.com/alc/wp-
content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card-
img img-fluid"/>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-md-4 col-12">
<img src="https://www.adorama.com/alc/wp-
content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card-
img img-fluid"/>
</div>
<div class="col-xl-8 col-md-8 col-12">
<img src="https://images.unsplash.com/photo-1524721696987-b9527df9e512?
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"class="card-img img-
fluid"/>
</div>
</div>
</div>
</div>
</div>
</div>
What I did:
What I want:
You can do this by setting the images as background-image
.img-6 {
background: url(https://www.artgalleryofhamilton.com/wp-content/uploads/2018/04/abstract-painting.jpg) no-repeat;
background-size: cover;
height: 300px
}
.img-1 {
background: url(https://www.adorama.com/alc/wp-content/uploads/2017/09/shutterstock_664474234-825x465.jpg) no-repeat;
background-size: cover;
height: 150px
}
.img-2 {
background: url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80) no-repeat;
background-size: cover;
height: 150px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 img-6 ">
</div>
<div class="col-sm-8 ">
<div class="row">
<div class="col-sm-4 img-1">
</div>
<div class="col-sm-4 img-1">
</div>
<div class="col-sm-4 img-1">
</div>
<div class="col-sm-4 img-1">
</div>
<div class="col-sm-8 img-2">
</div>
</div>
</div>
</div>
</div>
I started to learn Bootstrap since few days, and I am facing a problem about horizontal alignment.
In my exemple below, I want to distribute equitably the three divs "first", "second" and "third" on the screen, but it doesn't work.
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
Nevertheless, "justify-content-between" doesn't change anything...
Does anyone could help me?
If your using boostrap 4.1.1
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
.row is used
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
so you can just use,
<div class="container">
<div class="row ">
<div class="col-12 col-md-4 first">
<div class="text-center">
first 1
</div>
</div>
<div class="col-12 col-md-4 second">
<div class="text-center">second<br>second</div>
</div>
<div class="col-12 col-md-4 third">
<div class="text-center">third<br>third<br>third</div>
</div>
</div>
</div>
Further follow https://getbootstrap.com/docs/4.1/layout/grid/
Use only the col class instead of all the other col-* classes for the three columns.
.first,
.second,
.third {
height: 500px;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="first"></div>
</div>
<div class="col">
<div class="second"></div>
</div>
<div class="col">
<div class="third"></div>
</div>
</div>
</div>
You should not use fixed height. I have used just to show that the divs are aligned at the center.
Visit this link for more info
Update
If the content of the columns are img as you have commented that they are, then you should do this:
Use only col-12 and col-md-4. col-12 covers col-sm-12. And col-md-4 covers col-lg-4 also.
For the images, use img-fluid, d-block, and mx-auto classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
Update
In order to add space on the left and right side of the images, use px-5 for the columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
if you still need more space, use custom css.
.px-10 {
padding-left: 120px;
padding-right: 120px;
}
what i understood from that image that you sent that mean you already defined width and height for those divs and if you want to center those divs into the col you have to use margin:auto
PLEASE open the snippet in a full page mode to see it clearly
i just make a snippet to show you 2 cases the first case if you dont use fixed width it will take the col width as you define it here col-12 col-sm-12 col-md-4 col-lg-4" but once you use fixed width then you have to center the div with margin:auto
.row {
background-color: #eee;
}
.first {
height: 100px;
/* width: 100px; */
background-color: red;
}
.second {
height: 100px;
/* width: 100px; */
background-color: blue;
}
.third {
height: 100px;
/* width: 100px; */
background-color: green;
}
.first2 {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.second2 {
height: 100px;
width: 100px;
background-color: blue;
margin: auto;
}
.third2 {
height: 100px;
width: 100px;
background-color: green;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third2"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third3"></div>
</div>
</div>
</div>
How can I achive this behaviour on different screens. (Grey rectangles are divs with some content). Assuming, picture 1 (left) is normal, wide screen; picture 2 (middle) is small (netbook or tablet) screen; picture 3 (right) is mobile screen. I use bootstrap 3.
You could use the offset column and column ordering classes. Making sure to apply each at the appropriate screen/grid size.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
div[class^="col-"] > div {
margin: 1rem 0;
min-height: 100px;
background-color: yellow;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">
<div>2</div>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<div>1</div>
</div>
<div class="col-sm-6 col-md-4">
<div>3</div>
</div>
</div>
</div>
Note: The extra DIV in the column DIVs is for illustrative purposes. Do whatever you need to do.
You just need to use pull push classes of bootstrap.also learn about col-*-offset-* classes.
To learn more check this site:
Twitter bootstrap official docs
This is an example how you can do it
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;">
2
</div>
<div class="col-xs-12 col-md-6 col-lg-4 col-lg-pull-4" style="height: 100px; background-color: blue;">
1
</div>
<div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;">
3
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">1</div>
<div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>
I'm building a grid structure and I have changed the bootstrap container classes to new dimension which is working fine. I am currently trying to achieve the layout below and have gotten this far. Each column has a background image. I am trying to put another col-md-3 in the black section but have had no luck. Any suggestions?
My HTML
<div class="container">
<div class="row">
<div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row">
</div>
<div class="col-md-3 home-row-red">
</div>
<div class="col-md-6 col-sm-12 home-row-big">
</div>
</div>
</div>
CSS
.boats-row {
max-height: 720px;
height: 100%;
height: 720px;
background: url(img/boats.png);
background-size: cover;
}
.home-row-red {
height: 360px;
background: red;
max-height: 360px;
}
.home-row-big {
height: 720px;
max-height: 720px;
background: url(img/panel-large.png);
background-size: cover;
}
And something like this?
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="col-sx-6 col-sm-6 col-md-6 boats-row ">
</div>
<div class="col-sx-6 col-sm-6 col-md-6 home-row-red">
</div>
<div class="col-sx-6 col-sm-6 col-md-6 home-row-blue">
</div>
</div>
<div class="col-md-6 col-sm-12 home-row-big">
</div>
</div>
I have the following 4 squares (two rows and two columns):
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
I would like them to be displayed in a 4 square fashion and that the grid takes the whole width and height of the page. I also want it to be responsive and I don't want any spaces between each square.
I tried setting the css on my section tag like this:
section
{
height: 100vh;
}
But that had no effect. Does anybody know how to achieve this please?
Thank you
Try this as the CSS
section#gallery
{
height:100%;
width:100%;
}
div.row
{
height:50%;
}
div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
width:50%;
}
I think you are looking for something like this? https://jsfiddle.net/01djtnyd/
note: I changed all classes to "-6" so you can see it work easily in the fiddle
add class no-padding to the divs that are wrapping the img div
in the css add this:
.no-padding {
padding: 0 !important;
margin: 0;
}
.no-padding > div {
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
You can do this with css flexbox and jQuery. Here are two options to maintain the square shape of each div.
Option 1:
HTML:
<section id="gallery">
<div class="container-fluid">
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Jquery:
$(document).ready(function(){
var grid_w = $(".grid-block").width();
$(".grid-block").height(grid_w);
});
Fiddle: https://jsfiddle.net/puxLmy1y/2/
Option 2 (without jQuery):
HTML: Same as above
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
width: 50vh;
height: 50vh;
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Fiddle: https://jsfiddle.net/puxLmy1y/3/