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>
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>
Want to keep the image and div below at the same width.
Works fine until I get to around 545px to 575px window size. The .header changes width proportion only at col-md-12. Is there a way to keep the same aspect ratio?
SCREENSHOT
CODEPEN
HTML
<div class="container">
<div class="row">
<div class="first-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="second-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="third-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<!--END ROW-->
</div>
<!--END CONTAINER-->
</div>
CSS
.first-column{background-color: #c0c0c0}
.second-column{background-color: #808080}
.third-column{background-color: #778899}
.header{
background-color:rgba(45,44,89,0.7);
width: 100%;
color: #ffffff;
position: relative;
bottom: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
The bootstrap .img-responsive class has a max-width:100%; but it doesn't set the width.
So add a width to the class.
.img-responsive {
width: 100%;
}
https://codepen.io/rickydam/pen/XarXYX
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>
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/