My picture is positioned in a grid column.
When utilizing Bootstrap 4, the .title-image { width: 60%;} style works as intended.
However, upon transitioning to BS 5, the image suddenly expands and protrudes. It appears that the width attribute is now aligned with the body width, rather than the image column container.
Both Bootstrap 4.5 and 5 documentation mention that images are treated with
.img-fluid { max-width: 100%; and height: auto;}source:
v5: https://getbootstrap.com/docs/4.5/content/images/
v4.5: https://getbootstrap.com/docs/5.0/content/images/
Given that the specifications are the same, why does width: 60%; act differently?
CSS
.title-image {
width: 60%; /* this has different image display
between Bootstrap 4 and Bootstrap 5. Why? */
transform: rotate(25deg);
position: absolute;
right: 23%;
}
#features {
background-color: #fff;
padding: 7% 15%;
position: relative;
}
/* below is just decoration */
#title {
background-color: #ff4c68;
color: #fff;
text-align: left;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3.5rem;
line-height: 1.5;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 1.5;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.5rem;
}
p {
color: #8f8f8f;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.container-fluid {
padding: 3% 15%;
}
.navbar {
padding-bottom: 2.5rem;
}
.navbar-brand {
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.nav-link {
font-family: "Montserrat";
font-weight: 300;
font-size: 1.2rem;
}
.download-button {
margin: 3%;
}
HTML
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="https://i.ibb.co/yFBgCTG/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="container-fluid">
<div class="row">
<div class="grid-align-center col-lg-4">
<i class="fas fa-check-circle"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="grid-align-center col-lg-4">
<i class="fas fa-bullseye"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="grid-align-center col-lg-4">
<i class="fas fa-heart grid-align-center"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</div>
</section>
Feel free to play around with the Bootstrap framework (switch between 4 and 5) using the codeply setting icon for further experimentation: