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.
Related
I have this Bootstrap 5 code that shows some images like in this link in a grid, the images are affected by a few CSS code.
#projects img {
width: 100%;
height: 100%;
}
<section id="projects">
<div class="container text-center">
<h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
<div class="row g-4">
<div class="col-md-6">
<img
src="./images/cardcomponent.png"
alt="card component"
class="rounded-3"
>
</div>
<div class="col-md-6">
<img
src="./images/yardsale.png"
alt="yard sale"
class="rounded-3"
>
</div>
<div class="col-md-6">
<img
src="./images/qrcard.png"
alt="web developer"
class="qr card"
>
</div>
<div class="col-md-6">
<img
src="./images/cardcomponent.png"
alt="web developer"
class="rounded-3"
>
</div>
</div>
</div>
</section>
I want to add a title <h6></h6> to each image.
<div class="col-md-6">
<h6>Title</h6>
<img
src="./images/cardcomponent.png"
alt="card component"
class="rounded-3"
>
</div>
But for some reason, the title isn't included or recognized in the column, showing something like this, while this is similar to what i want to do.
#Emiliano Acevedo, Thanks to draw attention to the bug of bootstrap, I am sure the team must get those alignment issue fixed for row column.
Here's quick fix for the issue. <div class="row g-4 align-items-end"> You can fix the issue with adding item alignment in the row element.
I hope this helps.
CodePen Example
Div with text-center class makes all the text align at the center inside of it. But since you just want your <h4> tag align at the center only, just remove the text-center class from that div and add it to the <h4> tag. Once you do that, your <h6> tag inside of your column will work as you intended. Like:
#projects img {
width: 100%;
height: 100%;
}
<section id="projects">
<div class="container">
<h4 class="text-center fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
<div class="row g-4">
<div class="col-md-6">
<h6>Title 1</h6>
<img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
</div>
<div class="col-md-6">
<h6>Title 2</h6>
<img src="./images/yardsale.png" alt="yard sale" class="rounded-3">
</div>
<div class="col-md-6">
<h6>Title 3</h6>
<img src="./images/qrcard.png" alt="web developer" class="qr card">
</div>
<div class="col-md-6">
<h6>Title 4</h6>
<img src="./images/cardcomponent.png" alt="web developer" class="rounded-3">
</div>
</div>
</div>
</section>
Code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
Image(1) :
With Float Left and Right(2):
Problem: when i
add float:left and float:right, the text will changed position.
(wanted the text and link below the image
What i wanted: I want both image placement is like Image(2) + Text and
Link is below the image
When you use float, you have to use clear:<right|left|both or clearfix class if you use bootstrap after those elements.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
<div class="clearfix"></div>
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<div class="clearfix"></div>
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
But I don't recommend, you have to deal with problems later as well.
Better solution is to use flexbox, display: flex for css or class d-flex for boostrap for container. It will have flexible opportunities for manage layout.
UPDATE for css
.left-image-div-container {
display: flex;
justify-content: flex-end;
}
.right-image-div-container {
display: flex;
justify-content: flex-start;
}
.image-div-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage left-image-div-container">
<div class="image-div-wrapper">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage right-image-div-container">
<div class="image-div-wrapper">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Solution for bootstrap
Wrap your images and link with divs with d-flex flex-column align-items-center classes. Remove float from images styles. Add to col divs d-flex class and justify-content-end for the first one, and justify-content-start for the second.
Look example in snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-end">
<div class="d-flex flex-column align-items-center">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-start">
<div class="d-flex flex-column align-items-center">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Hy,
First remove the float:left and float:right from both images
And then you have to just add this CSS code.
.leftimage>img{
display: block;
margin-left:auto;
margin-right:auto;
}
use this code this will solve your problem,the problem was you have placed the float option in image not the div, if not work please let me know . thank you. heres the codepen link
https://codepen.io/salmanaabir/pen/VwLLZRG
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:left;">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="height:640px;text-align:center;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:right;">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="height:640px;text-align:center;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6" >
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<div class="caption">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<div class="caption">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Try adding align = "bottom" to the image tag or add enough before the text string until it appears below the image.
I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?
if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/
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.