I have problems with center. I want to center icon and text on the same line with Bootstrap but its not working good. I am beginner here so I dont know much. Wanted this: Example https://i.stack.imgur.com/prSlD.png
My code what i have tried:
<section class="container-fluid bg-dark text-center">
<h2>WHY US</h2>
<div class="d-flex align-items-center">
<img class=" me-3" src="img/icon.png"style="width:40px" alt="">
<h5 class="mb-0">FAST DELIVERY </h5>
</div>
</section>
Try this , I think this will work
<section class='container-fluid text-center'>
<h2>WHY US</h2>
<div class='d-flex align-items-center w-100 justify-content-center'>
<img
class='me-3'
src='img/icon.png'
style='width:40px'
alt=''
/>
<h5 class='mb-0'>FAST DELIVERY </h5>
</div>
</section>
Try this one
<div class="container-fluid">
<div class="d-flex flex-column align-items-center">
<h2>WHY US ?</h2>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
</div>
I have use font awesome icon you can replace it with your image tag.Hope that work for you :)
Related
I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com
In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.
How do I keep the cards at the same height and keep the buttons aligned at the bottom?
Thank you!
You can play around with flex CSS. Let me demo to you by using back your code.
add .h-100 to .card
add .d-md-flex and .flex-column to .card-body
add .flex-grow-1 to .card-text
Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.
You can refer this page for full capability of flexbox for Bootstrap 5.
Hope it helps.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
Using Bootstrap 5.1.3, how do I get the image to be the height of the card's body & footer ?
Fixing this should also put the card-footer at the bottom of the card.
Result I'm trying to achieve:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
style="object-fit: cover;">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill bg-dark">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>
I tend to avoid absolute positioning, but it works here above the mobile breakpoint. Add a few classes to do that (including on the parent element), and create a class for responsive image styles.
.fit-cover {
object-fit: cover;
}
#media (min-width: 768px) {
.fit-cover {
position: absolute;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4 position-relative">
<img src="https://via.placeholder.com/600" class="card-img fit-cover w-100 h-100" alt="...">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill bg-dark">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>
you asked to make > cards image height of the card body.
but according to me the content should follow the height of image.
To achieve the result as in your screen shot I have added
style="height: calc(100% - 41px);"
to card-body reducing the footer height. it will now take full height of parent element. check if this solves your problem If there anything else let me know
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
style="object-fit: cover;">
</div>
<div class="col-sm-8">
<div class="card-body" style="height: calc(100% - 41px);">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill text-bg-secondary">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col card" style="flex-direction: row;">
<div class=" h-100">
<img src="https://img.freepik.com/free-psd/futuristic-glow-t…ect-psd-editable-template_53876-115831.jpg?w=2000" class="card-img-top" alt="..." style="width: 240px;">
</div>
<div>
<div class="card-body px-2 py-2 p-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="border-top">
<small>Update 2min ago</small>
</div>
</div>
</div>
</div>
</div>
For bannerimage section which has texts on the specific position, I don't want to write custom CSS to place the div. The below code fits correctly according to design and it's good in responsive also. I've not used this code everywhere but only in 1 section where there is a condition to display div or text at a specific position. I don't want to write custom CSS. But using bootstrap empty div problem is solving, Is this correct or not.
<div class="mainbannerimagewithtext">
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 media ">
<div class="col px-5 ">
<p class="twentyfive ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteen">Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet,
consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
<p class="adm-nf-twenty"></p>
<p class="adm-nf-twentyitalic"></p>
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class="bluebox ">
<div class="text-start px-5 py-5">
<p class="twenty">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="twentyitalic">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite"> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
My opinion is you should consider using offset for the best practice, also you can customize it for all available screen size Bootstrap provided.
Like this for example :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">normal .col-md-4</div>
<div class="col-md-4 offset-md-4">.col-4 getting offset for 4 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 getting offset for 3 col in md screen size</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Also always remember offset always arrange the column to the right
Problem:
I am currently working on a website and tried my best using/learning bootstrap and wanted to implement e.g. 3 cards. But once I resized the window vertically all my elements shift upwards and it kind of destroys the look of the site, because they overlap into other elements. I think the problem might be my flex elements but I don't know how to make it work any other way.
Code:
Card elements
<section class="row container-fluid h-75 justify-content-evenly align-items-center">
<div class="col-md-3">
<div class="card text-white bg-dark p-4">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, natus?
</p>
Go somewhere
</div>
</div>
</div>
+2 identical cards
</section>
e.g. my footer
<footer class="container-fluid text-center py-5 text-white bg-dark">
<h1 class="pb-5">Partners:</h1>
<div class="d-lg-flex justify-content-evenly pb-5">
<img class="img-fluid w-25" src=".." alt="">
<img class="img-fluid w-25" src=".." alt="">
</div>
</footer>
Images:
Overlapping card
you can make it work by giving the margin-top on footer and to cards also,
try to run this code, if you need it like this:
<section class="row container-fluid h-75 justify-content-evenly mx-auto align-items-center">
<div class="mb-3 col-12 col-md-3">
<div class="card text-white bg-dark p-4">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis, natus?
</p>
Go somewhere
</div>
</div>
</div>
+2 more identical cards
</section>
footer with mt-5
<footer class="container-fluid text-center py-5 mt-5 text-white bg-dark">
<h1 class="pb-5">Partners:</h1>
<div class="d-lg-flex justify-content-evenly pb-5">
<img class="img-fluid w-25" src=".." alt="" />
<img class="img-fluid w-25" src=".." alt="" />
</div>
</footer>
I try to build a landing page using bootstrap.
I created a section with icon and tags.
but the text in p and h3 tags look like this
here is code for section:
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3 pl-12 pr-12 ml-13 mr-13">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
</section>
i want to mage text be in one or 2 lines.
Correct you code, you have doubles of blocks width class="col-12 col-sm-6 col-lg-3", do like this
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</section>
This is because you have declared columns inside columns.
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
----
</div>
</div>
In the above code, 2nd div will be taking 3 columns space of 1st div in large screens(col-lg-3) and 6 columns space in small screens(col-sm-6). It won't take complete column width of 1st div