White space in Bootstrap 4 grid caused by a full-width row

I have set up a bootstrap grid layout that includes ads, and I wanted to integrate a section for banners within it. After some experimentation, I managed to achieve this by inserting a container between the ads and the banners, each housed in their own row. However, I am now facing an issue as shown in the image below.

Is there a solution to reposition the ads more effectively while minimizing unused empty space?

Note1: The number of columns adjusts based on screen size.

Note2: The number of banners in a row correlates with the column count (using the d-none trick).

https://i.sstatic.net/NFge9.png

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>

        <div class="container">
             <div class="row">
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
             </div>
        </div>

        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

When using a layout with 4 columns in each row, it is important to place ad columns in their own separate rows. The Bootstrap grid system operates on a 12 column layout, meaning that the total sum of columns in each row should add up to 12. You can create various combinations of columns like .col-md-4, .col-md-4 and .col-md-4 within one row.

There is no need for a separate container specifically for ad banners.

Below is an example code snippet:

<div class="container">
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <!-- Ad banners-->
        <div class="row">
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
        </div>
       <div class="row">
           <div class="col-md-3 ad">Col-1</div>
           <div class="col-md-3 ad">Col-1</div>
           <div class="col-md-3 ad">Col-1</div>
           <div class="col-md-3 ad">Col-1</div>
       </div>
   </div>

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

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

javascripthtmljquery

Having trouble selecting a box with Selenium Webdriver in Python

When using Selenium Webdriver with Python, I am facing an issue clicking on the box that contains the text "24h". Here is my code snippet: from selenium import webdriver from PIL import Image from selenium.webdriver.chrome.service import Service import ti ...

pythonhtmlselenium

What is the best way to extract a piece of text and incorporate it onto my website?

I'm currently attempting to extract the URL from a page on Steam. My goal is to obtain the picture URL of any user who visits it. Here is the JSON code provided by Steam when requesting a user's information: { "response": { "players": [ ...

htmljsonsteamsteam-web-api

What could be the reason for lxml not being able to locate this class?

Trying to extract text from a webpage using Python has always been tricky, especially with the surprises lxml tends to throw. Here's what I attempted: >>> import lxml.html >>> import urllib >>> response = urllib.urlopen(&a ...

pythoncssweb-scrapinglxml

Developing gaps or margins among table components

Struggling to create spacing between text and an image in an HTML email, but the image just won't budge no matter what I do. Check out my Fiddle here: https://jsfiddle.net/rwcgs0g8/ All I want is for the red "Download your free" image to shift down ...

htmlcss

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

csshtml

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

javascriptjqueryhtml

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

cssmenu

Calculating the number of checked checkboxes using PHP and HTML

Greetings! I am just starting to learn php and I have a question about how to count the number of 'checkbox' items that are checked when I click on a submit button. Here is an example: <input type = "checkbox" value = "box" name = "checkbox1 ...

phphtmlcheckbox

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

javascriptjqueryhtmlcss

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

htmlangulartypescriptangular6

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment

Move the menu position in Bootstrap 4 navbar

<div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Hidden content</h5> <span class="text-muted">Toggleable via the ...

htmlcssbootstrap-4

Is there a way to fill an HTML text box with data retrieved from a session or managed on the server side using C# and HTML?

I have some textbox values on an aspx page that I pass to the next page using sessions. Now, I want to display these values in an HTML textbox. How can I achieve this? The values I have are server-side, while the HTML text box value is client-side (this is ...

c#htmlasp.net

Find the Nearest Value with Jquery and Swap Out the Div

When users complete a form and click "continue," they move on to the next section. At the top of the page, a heading indicates that the previous form is finished. If users click on the heading, it expands the completed form so they can edit it. For instan ...

javascriptjqueryhtml

Animate the height transition of contenteditable after a line of text is added (using shift+enter) or removed

Currently, the contenteditable attribute is being utilized on the <div> tag to enable autogrow functionality similar to a textbox. Additionally, there is an attempt to incorporate a height transition. While most aspects are functioning correctly, the ...

javascriptjqueryhtmlcss

What is the established procedure for resetting all elements within an (X)HTML document?

Is there a way to reset elements without using a form like how it can be done with JavaScript? document.forms[0].reset(); I am utilizing AJAX, so do I need to loop through all the elements using JavaScript? ...

javascripthtmlajaxdomxhtml

Designing a toggle button interface with Material UI

Looking to add a toggle button to my page. Here is an image of what I have in mind: https://i.sstatic.net/tiQAP.png Unable to find any material-ui component or API for this specific toggle button design. Considering building a custom toggle button with CS ...

javascriptcssreactjsmaterial-ui

Is there a way to change the color of just the most recently clicked anchor element <a>?

I have a sidebar with anchor elements (Link 1,2,3 in my HTML). I want the text color of these anchors to change when clicked. Additionally, I need only one anchor element to be colored at a time, meaning the previous one should return to its normal color. ...

javascripthtmlcss