This tutorial will guide you through the process of creating Overlapping Images Using Bootstrap 5. By following these steps, you’ll be able to implement a visually appealing layout where images are strategically positioned to overlap each other, enhancing the overall design of your webpage.
Adding Bootstrap 5 to Your Project
The first step is to include the Bootstrap 5 CSS in your HTML document. This is typically done by adding a link to the Bootstrap CDN in the `<head>` section of your HTML file.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css'>
Creating the HTML Structure
Next, we’ll build the HTML structure that will contain our overlapping images and any accompanying text content. We’ll use Bootstrap’s grid system to organize the layout.
<section class="about_section padding">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="content col-12 col-lg-5 p-4 m-3">
<div class="text-center">
<h1>Sea Creature</h1>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa minus cupiditate aliquid rerum est voluptate exercitationem possimus aperiam laborum praesentium provident aut illo consequatur quam explicabo quidem similique, consequuntur cumque. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa minus cupiditate aliquid rerum est voluptate exercitationem possimus aperiam laborum praesentium provident aut illo consequatur quam explicabo quidem similique, consequuntur cumque.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="about_img">
<img src="https://www.jellypir.at/CODEPEN/picture/autre/squaejell_1.jpg" alt="idea-images" class="about_img_1 ">
<img src="https://www.jellypir.at/CODEPEN/picture/autre/squaejell_2.jpg" alt="idea-images" class="about_img_2">
<img src="https://www.jellypir.at/CODEPEN/picture/autre/squaejell_3.jpg" alt="idea-images" class="about_img_3" >
</div>
</div>
</div>
</div>
</section>
Styling with CSS
To achieve the overlapping effect and customize the appearance of the images and text, we’ll add some custom CSS styles. These styles will control the positioning, sizing, and layering of the images.
@import url('https://fonts.googleapis.com/css2?family=Molle:ital@1&display=swap');
body
{
background-color: #f6feff;
background: #076585; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fff, #076585); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fff, #076585); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1
{
font-family: 'Molle', cursive;
color:CornflowerBlue;
}
p{
color:DimGrey;
}
.padding {padding: 80px 0;}
.about_section .about_img img
{
max-width:100%;
border-radius:15px;
box-shadow:0 16px 28px 0 rgba(8,56,103,.5);}
@media (min-width:992px)
{
.about_section .about_img img
{
width:60%;}
.about_section .about_img_2
{
margin:-180px 0 0 270px;}
.about_section .about_img_3
{
margin:-260px 0 0 40px;}
}
@media(max-width:991px)
{
.about_section .about_img img
{
margin:3rem 0;}
}
.about_section .content
{
background-color:white;
border-radius:35px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
With these steps, you have successfully created Overlapping Images Using Bootstrap 5. This technique can greatly enhance the visual appeal of your web pages, creating a more engaging user experience.
