I want to achieve a layout using Boostrap 5 and I'm failing to do so.
This is the layout which I want to have:
layout example
This is the layout that I have: https://jsfiddle.net/7rpmqsc0/
This is my mark up:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<img data-src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<div class="row">
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
My problem is that I can't achieve a gap between rows where the images meet on the left side. Maybe I am missing something silly but I can't figure it out. Thank you for your help
You can rethink the structure with 2 col side by side where one olds also two columns with the smaller img.:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!--left col also styled as a row -->
<div class="col-6 row">
<!-- first row of that col -->
<img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
<!-- second row of that col with 2 col-6 -->
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<!-- right column -->
<div class="col-6">
<img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</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.
I don't understand how to change the height of my column in a way to have three elements in my first and second column. I'm new to design element so a little help would be very helpful for me
Mock-up that I want to create:
My code looks like this:
<div class="card-columns pl-5 pr-5">
<!-- col 1-->
<div class="mb-3">
<h1>Lorem Ipsum</h1>
</div>
<div class="card">
<img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<!-- col 2-->
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
</div>
<div>
<span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
style="padding-left: 10px; transform: rotate(270deg);"> </span>
</div>
<!-- col 3-->
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
</div>
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
</div>
</div>
I hope you can help me to understand how Masonry work in a way to help me with this code.
Bootstrap Masonry using .card-columns is not so flexible solution for this case. Better to use simple Bootstrap grid system. I made three columns, which are .col-sm-6, .col-sm-4 and .col-sm-2. As you probably now, BS grid contains of 12 columns, so we have 6+4+2=12 columns here. In my example the sizes of the blocks will depend on the proportions of image inside. .img-fluid class makes images max-width: 100%; so thew will not tear the parent block.
This example made by using only Bootstrap 4 classed, for instance. If you want to add some specific setting - you will need to write additional CSS classes and their properties.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-5">
<div class="row">
<!-- col 1-->
<div class="col-sm-6 px-1">
<div class="mb-2">
<h1>Lorem Ipsum</h1>
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2 text-right">
<img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
</div>
</div>
<!-- col 2-->
<div class="col-sm-4 mt-1 px-1">
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1000">
</div>
<div class="text-right">
<span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
</div>
</div>
<!-- col 3-->
<div class="col-sm-2 px-1">
<div class="mb-2 mt-4">
<img class="img-fluid" src="https://via.placeholder.com/1000x1300">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1100">
</div>
</div>
</div>
</div>
More about Bootstrap technologies I used in this exapmple:
Grid https://getbootstrap.com/docs/4.0/layout/grid/
Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
image-fluid https://getbootstrap.com/docs/4.0/content/images/
Sizing https://getbootstrap.com/docs/4.0/utilities/sizing/
I have this code containing a row of bootstrap template cards:
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
I would like the cards to display with 4/row on large screens, 2/row on medium screens, and 1/row on small screens. When I remove the margin (m-3 class) from each card, this works perfectly. However, with the margin added, one or more of the cards ends up getting bumped down to another row, like the image below. How can I have these set numbers of cards in each row, while still allowing the cards to be spaced out nicely?
When you add side margin to columns then the calculation of bootstrap row gets disturbed, now the row have to accommodate that extra margin also with the columns and since the width of row here is fixed then it will shift the last column to next line. You can achieve the same effect by using padding in an inner container instead of using margin on cols.
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card w-100 inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
</div>
But you can apply margin to cols from top and bottom,
Hope it helps !
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/
I am using bootstrap columns that each have an image inside of different sizes which are aligned on full screen view however when using bootstrap's class img-fluid they resize for smaller viewports but instead of being aligned between the other images vertically the smaller images end up on the top of their div column.
Is there a way to vertically align these images while the image scales down?
Here is the markup:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">
<img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
</div>
</div>
As you are using bootstrap 4, Just add align-items-center class in your row
For more help read Bootstrap4 Flex Grid
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-center">
<div class="col-2">
<img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
</div>
<div class="col-2 align-items-center">
<img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
</div>
</div>