I'm currently new to bootstrap and still wondering on the Grid system, currently facing a problem where the height for both column is different, is there anyway to make it same ?
Refer to Pic 1
Also there is another problem when i reduce the size as im making it responsive, but when i reduce it to mobile size, the 2nd column did go down but the borders of the 2nd column does not match the first one.
Refer to Pic 2
Below is the Html code,
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info" style="height: 200px;">
<div class="row col-md-6 bg-info" >
<img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
</div>
<div class="ml-5 col-md-6 bg-info">This is the beauty of nature</div>
Thanks
The height of the two columns was not the same because you defined the height of the row.
If you make it to show divs in two-column in mobile view then you should use col-sm and also col-xs
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info">
<div class="row col-md-6 col-sm-6 bg-info" >
<img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
</div>
<div class="ml-5 col-md-6 col-sm-6 bg-info">This is the beauty of nature</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row bg-info py-3">
<div class="col-12 col-md-6">
<img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
</div>
<div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row bg-info py-3">
<div class="col-12 col-md-6">
<img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
</div>
<div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
</div>
</div>
Related
I have a bootstrap 5 website template where I want to display divs in these order:
DESKTOP:
1st line of divs: image, text
2nd line of divs: text, image
MOBILE:
1st line of divs: image, text
2nd line of divs: image, text
Simply said, there should be different order/alignment of every second line of divs for mobile devices. Could you please help me how to achieve it? I've tried to use several bootstrap classes, or even hardcode float left and right. Nothing helped. Here's my code:
<!-- Img1 -->
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-md-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt="">
</div>
<div class="col-md-6 text-center align-items-center mob_padding_T20" style="color: #FF0000;">
Copy1
</div>
</div>
<!-- Img2 -->
<div class="row" data-aos="fade-up" data-aos-delay="100" style="padding: 20px 0 0;">
<div class="col-md-6" style="float:right;">
<img src="assets/img/portfolio/img2.jpg" class="rounded mx-auto d-block" alt="">
</div>
<div class="col-md-6 text-center align-items-center mob_padding_T20" style="float:left; color: #FF0000;">
Copy2
</div>
</div>
Thank you.
SUGGESTION: Avoid using inline CSS (style:: float:left or float:right) because managing responsive devices is quite challenging.
Because it affects SEO, please remove the second row if you don't require it and use the direct col-sm/col-md/col class instead.
Use col-6 in bootstrap 5 if you want to display text and an image on a single line.
Review it here: run code snippe .
In case you have any other queries, kindly let me know.
Please review it codepen URL. I have provided you both examples in codepen.
Please let me know if you have any further question.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="text-center">
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-6 p-3 order-sm-1 order-md-1 bg-primary">
<img src="https://raw.githubusercontent.com/MSRAJAWAT298/msrajawat298/main/images/background-images/msrajawat298_bg-min.png" width="75px" cla ss="rounded mx-auto d-block" alt="">
</div>
<div class="col-lg-6 p-3 text-center align-items-center mob_padding_T20 order-sm-2 order-md-2 float-end bg-info" style="color:red">Copy1</div>
<div class="col-lg-6 p-3 order-sm-4 order-md-4 bg-danger">
<img src="https://raw.githubusercontent.com/MSRAJAWAT298/msrajawat298/main/images/background-images/msrajawat298_bg-min.png" width="75px" class="rounded mx-auto d-block " alt="">
</div>
<div class="col-lg-6 p-3 text-center align-items-center mob_padding_T20 order-sm-3 order-md-3 bg-dark" style="color:red">Copy2</div>
</div>
</body>
</html>
Here is the solution:
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-6">
<img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
</div>
<div className="col-6 text-center align-items-center mob_padding_T20" >
Copy1
</div>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100" style={{ padding: "20px 0 0" }}>
<div className="col-6 text-center align-items-center mob_padding_T20" style={{ float: "left", color: "#FF0000" }}>
Copy2
</div>
<div className="col-6" style={{ float: "right" }}>
<img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
</div>
</div>
Your Problem:
The problem was that when you specified the column sized for your divs you used col-md-6 this will only be applied to medium-sized screens and larger. Here is a link explaining bootstrap grid
Please try this one
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row data-aos="fade-up" data-aos-delay="100"">
<!-- Start Img 1 -->
<div class="col-sm-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
</div>
<div class="col-sm-6">
Text 1
</div>
<!-- End Img 1 -->
<!-- Start Img 2 -->
<div class="col-sm-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
</div>
<div class="col-sm-6">
Text 2
</div>
<!-- End Img 2 -->
</div>
</div>
<div class="container mt-5">
<div class="row data-aos="fade-up" data-aos-delay="100"">
<!-- Start Img 1 -->
<div class="col-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
</div>
<div class="col-6">
Text 1
</div>
<!-- End Img 1 -->
<!-- Start Img 2 -->
<div class="col-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
</div>
<div class="col-6">
Text 2
</div>
<!-- End Img 2 -->
</div>
</div>
SUGGESTION: Please don't use inline CSS (style:: float:left or float:right) because it's very difficult to manage responsive devices.
If you don't need the second row then please remove it and use the direct col-sm/col-md/col class because it affects in SEO.
If you display text + img in single line then you can use col-6 in bootstrap 5.
Please review it codepen URL. I have provided you both examples in codepen.
Please let me know if you have any further question.
Can you help me fix this Bootstrap 5 code to fit in all 16:9 full screen device (mobile and desktop/1080p/2160p chrome browser) to 100% width and 100% height? (and no scroll to right and no scroll to down) I read 100+ examples and tutorial about this and not found any working solution. All images are 16:9 ratio.
At 1920p width landscape mobile screen still need to scroll about 5% for right and down. But it's just spacing and no information in right and down. Also same as desktop too.
Ideal: first row about 40% height and second row is about 60% to fit 5 column in 1 row at same size. In the first column image should be fit this 40% total height.
Ideal sketch layout:
------------------------------------------------------
- -
- big-img-big-img -
- big-img-big-img have a nice day -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
------------------------------------------------------
- -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- text text text text text -
- -
------------------------------------------------------
The source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column vw-100 vh-100">
<div class="row justify-content-center row-cols-1">
<div class="card mb-4 justify-content-center" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-4">
<div class="card-body">
<h5 class="card-title">Have a nice day!</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center row-cols-5">
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 1</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 2</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 3</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 4</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 5</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ideal if 5 column fit the 100% width and no scroll to right.
Please help me how possible to fit in 1 screen without any scrolling right and down!
Seems like it's already responsive but need to fix to be better.
Thank you!
A couple of things about bootstrap:
If images in columns in a row have the same aspect ratio, they will have the same height.
The number of grid items in a row are 12.
So, if you want the 40% and 60%, then is either col-5 and col-7 or col-4 and col-8. This caters for the first row.
The second row is even more direct. You can just have one row and several columns with either col-2 or just col.
Here is what I mean:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
</div>
<div class="col-7">
Place content here.
</div>
</div>
<div class="row">
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</div>
</div>
This picture shows my current view. I'd like both columns to reach the end of the viewport instead of cutting out like it is here.
You can use bootstrap utility classes to achieve this. i.e vh-100 and h-100
Set the container to 100vh and row to 100%.
Note: You'll have to adjust the image to fit the entire viewport.
<div class="container-fluid vh-100">
<div class="row h-100">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</div>
</div>
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I have a row consisting of 8 cards.
I want to have all these in single line.
There is a margin of column size 2 on left side and I have set each card of size 1 (so 8 + 2 = 10)
But then, my row is all messed up.
Currently my code for border is
<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-lg-1 text-center">
<div class="card border-secondary mb-3" style="width: 10rem;">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
</img>
<div class="card-block">
<div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
</div>
</div>
</div>
</div>
I want the card to have this width (so not card to be small)..It can overflow on the right side of the screen..
How do i do this?
The problem has to do with your inline style of width:10rem. It's going to supersede the width of col-lg-1 when it is greater than that column width. Removing this inline style results in expected behavior.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
For the purposes of this example I've changed your column breakpoints to something that works better when you choose 'Run Code Snippet'. I suspect you were applying an inline width because col-lg-1 is too small; that being the case I recommend you consider a larger column breakpoint in lieu of inline styles overriding grid behavior.