To achieve the desired effect, consider utilizing the container-fluid class and adjusting the padding values using a separate class in a distinct CSS file.
HTML File
<div class="container-fluid my-container">
<div class="row no-gutters"></div>
</div>
CSS File
.my-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
Next, proceed to include your CSS file as usual. It is advised not to override the container-fluid class directly to maintain flexibility for other sections of your website that may require the default padding.
Alternatively, you can opt to forego the container class and utilize the row and no-gutters classes:
<div class="row no-gutters">
<!-- insert content here -->
</div>
To ensure uniform image widths, apply the same column class to all images and utilize the background-image property within the elements instead of inserting an actual image. For images with embedded links, a structure like the following is recommended:
HTML File
<div class="row no-gutters my-row">
<div class="col-12 col-md-6">
<a href="#" class="image-link image-1"></a>
</div>
<div class="col-12 col-md-6">
<div class="content-container">
<!-- insert content here -->
</div>
</div>
</div>
CSS File
.content-container {
display: flex;
height: 100%;
align-items: center;
padding: 2rem 1rem;
min-height: 50vh;
}
.content-text {
text-align: center;
margin: 0;
}
.image-link {
display: block;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
Adding min-height to the image and content containers ensures consistent sizes irrespective of the content length. Maintaining uniform element heights is crucial for layout stability, as observed in the linked example where text length directly impacts layout structure integrity.
For a functional demonstration, refer to the following example:https://codepen.io/rhernando/pen/WNbaaeN?editors=1100