Excessive padding issues arising from Bootstrap 4 columns and rows

Utilizing bootstrap to structure columns and rows for my images is causing excessive padding around them, deviating from the intended design:

https://i.sstatic.net/8cQVg.png

Here's the HTML structure I employed:

<!-- header -->

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
                </div>
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
                    </div>
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="container">
                            <h1>@php(get_field('front-page__title'))</h1>
                            <div>@php(get_field('front-page__slogan'))</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-9">
                            <div class="container">
                                <div class="zeo-cases-button">
                                    <a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="container">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- /header -->

Resulting in this layout:

https://i.sstatic.net/SAvOE.jpg

My query is: Are my bootstrap elements correctly implemented? How can I address the padding issue while ensuring the design requirements are met? Thank you for your assistance.

Answer №1

To eliminate the spaces between the col-* elements, simply add the class no-gutters to each div class="row".

For more information on gutters, refer to the Bootstrap documentation.

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ddd" class="col-sm-3">d</div>
</div>

Check out this jsfiddle for a live example that also eliminates any "visual padding" when images do not fully fit in the container.

Answer №2

When working with Bootstrap, you can easily remove the gutters between columns by using the .no-gutters class. This will eliminate the negative margins from the .row element and the horizontal padding from all immediate children columns.

Here's an example of how you can implement this:

<div class="row no-gutters">
    <div class="col-6">
       <img ... />
    </div>
    <div class="col-6">
       <img ... />
    </div>
</div>

Answer №3

Try implementing the following CSS class and see if it resolves the issue:

.zero-margin-zero-padding {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

Tips for fashionable dressing &

Can you provide some insights on how to format the &amp; symbol in this HTML snippet? <a>Ian</a> &amp; <a>Jim</a> ...

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

Positioning Backgrounds with Padding in DIV Elements

I am trying to figure out how to add a check mark next to text in a button with specific styling. I have managed to get the check mark aligned properly using Background:left center, but I also want to add padding and adjust spacing. Is there a way to achie ...

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

Ensure that all of the <li> elements within a <ul> container have equal widths

I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

Tips on concealing unnecessary subdirectories in a Firebase website URL

Looking to shorten the URLs of my webpages hosted on Firebase. The HTML files are located within an "html" folder inside the public directory. Currently, the URL for the index page is: www.lstein-28b62.web.app/htmlfolder/index.html Is there a way to chan ...

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on im ...

What is causing this unexpected text to display in Django when encountering errors while trying to submit a form?

On my website, there is a form that collects an employee number and validates it against another model called Salesman. It also checks if the employee's team field includes 'WF'. The validation process functions correctly and displays everyt ...

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. https://i.sstatic.net/2FQkD.png In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span ...

Switching the input type from file to text

My request is to have a file input type that is initially set as read-only, yet still allows the user to manually enter the file name in a text box. Is there a way to achieve this? I want to be able to write the file name similarly to how I would input t ...

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase ...

Trouble with feedback form not showing up

I've been working on creating an ajax feedback form, but I'm facing difficulties in getting it to show up properly. The feedback image appears, but clicking on it doesn't trigger any action. Here's my Form: <div id="feedback"> ...

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

Retrieving information from an API and presenting it as a name with a link to the website

I am attempting to retrieve information from an API and present it in the format Name + clickable website link. Although I have managed to display the data, the link appears as text instead of a hyperlink. Here is my Ajax script: $(function() { ...

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

Clicking on the overlay does not close the bootstrap collapsed toggle

I'm currently facing an issue where I need to add a listener that closes the menu when clicked away. The code snippet below shows my attempt at solving this problem: $("body").click(function(e){ var $box1 = $('.navbar-toggle'); var $b ...

Obtain the option tag's name

One of my challenges is working with a dynamically created dropdown in HTML and having a dictionary in the back-end to retrieve keys. As users keep adding options to the dropdown, I face the issue of not having a value attribute like this: <option valu ...