The columns in the row are not fully filling up the container

I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, so I tried using "row-cols-md-auto" for that purpose. The issue is that the row does not fill the container as shown in the image below:

https://i.sstatic.net/8Haga.jpg

Using Bootstrap v5.2, this is a snippet of my code:

<div class="container text-center bg-white">
    <div id="menu" class="row row-cols-4 row-cols-md-auto sticky-top mt-5">
        <button id="faq1" class="col p-2 p-md-3 border" href="#">FAQ1</button>
        <button id="faq2" class="col p-2 p-md-3 border" href="#">FAQ2</button>
        <button id="faq3" class="col p-2 p-md-3 border" href="#">FAQ3</button>
        <button id="faq4" class="col p-2 p-md-3 border" href="#">FAQ4</button>
        <button id="faq5" class="col p-2 p-md-3 border" href="#">FAQ5</button>
        <button id="faq6" class="col p-2 p-md-3 border" href="#">FAQ6</button>
        <button id="faq7" class="col p-2 p-md-3 border" href="#">FAQ7</button>
        <button id="faq8" class="col p-2 p-md-3 border" href="#">FAQ8</button>
    </div>
    <div id="viewer" class="row">
        <div class="include-html"></div>
    </div>
</div>

Any suggestions on how I can make the row fill the container on desktop screens?

Answer №1

One issue is that when using row-cols-md-auto, the columns (buttons) will shrink to the width of their content. Additionally, Bootstrap does not provide a row-cols-md class to allow columns to expand on a medium viewport size. Therefore, it may not be possible to achieve this using row-cols-*. Instead, you could consider using a custom CSS class...

CSS...

@media (min-width: 768px) {
    .row-cols-md>.col {
        flex: 1 0 0%;
    }
}

Markup...

<div class="container text-center bg-white">
    <div id="menu" class="row row-cols-4 row-cols-md sticky-top mt-5">
        <button id="faq1" class="col p-2 p-md-3 border" href="#">FAQ1</button>
        <button id="faq2" class="col p-2 p-md-3 border" href="#">FAQ2</button>
        <button id="faq3" class="col p-2 p-md-3 border" href="#">FAQ3</button>
        <button id="faq4" class="col p-2 p-md-3 border" href="#">FAQ4</button>
        <button id="faq5" class="col p-2 p-md-3 border" href="#">FAQ5</button>
        <button id="faq6" class="col p-2 p-md-3 border" href="#">FAQ6</button>
        <button id="faq7" class="col p-2 p-md-3 border" href="#">FAQ7</button>
        <button id="faq8" class="col p-2 p-md-3 border" href="#">FAQ8</button>
    </div>
    <div id="viewer" class="row">
        <div class="include-html"></div>
    </div>
</div>

OR

To avoid using custom CSS, consider utilizing the class grid sizes instead of row-cols-*...

<div class="container text-center bg-white">
    <div id="menu" class="row sticky-top mt-5">
        <button id="faq1" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ1</button>
        <button id="faq2" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ2</button>
        <button id="faq3" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ3</button>
        <button id="faq4" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ4</button>
        <button id="faq5" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ5</button>
        <button id="faq6" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ6</button>
        <button id="faq7" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ7</button>
        <button id="faq8" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ8</button>
    </div>
</div>

Demo:

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

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Greetings everyone! This is my debut post on this platform, and I'm in urgent need of assistance as I am relatively new to the world of programming. I've been trying tirelessly to implement a hover effect on these cards, but for some reason, it ...

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

Moving Angularjs table rows to another tableMoving table row from one Angular

I need a solution for transferring rows from one table to another. Here are the two tables involved: First Table: <table> <tr ng-repeat="row in items"> <td>{{row.PRODUCTDESCRIPTION}}</td> <td><inpu ...

Is it possible to change button behavior based on input values when hovering?

Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...

Execution of Ajax call fails to occur synchronously

I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...

Python script using Selenium to only print elements in an HTML page that have a specific class value and print only certain elements based on

I am currently developing a script to automatically test all the free proxies available on The website contains a comprehensive list of all available proxies, and I have successfully made my script extract and display them. However, I only want to display ...

I could use some input on the best way to make a background video fill the screen while incorporating overlay text

Struggling to make the background video fit perfectly on all devices and browsers? While it looks great in Chrome now, I'm still facing some clipping issues with IE Edge. Any experts out there who can offer their validation or suggest improvements? I ...

Issue with maintaining image aspect ratio; unable to utilize background-image: cover property

If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...

Troubleshooting a problem with dynamic options in Materialize select set

I'm currently facing an issue with my two dependent dropdowns, country and state. When I select a country, I use JavaScript to populate the respective states in the state dropdown. However, even though the options are added correctly when I inspect th ...

The malfunctioning Bootstrap navbar dropdown menu is causing a disruption in user experience by unexpectedly logging the user

I'm having an issue with the dropdown menu on my angular app. Every time I click on the Profile link to access the Account and Logout options, it automatically logs me out. <nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top" ...

What is the process for integrating internal PHP code into this HTML form instead of relying on an external PHP file?

I am looking to create a basic HTML form and I want to use the method below for posting. My goal is to include all PHP code within the HTML file itself. (I understand that simply renaming contact.htm to contact.php is an option, but I need guidance on tra ...

Make sure all of the inner tags are properly contained within their respective containers

In my explanatory bubble, I aim to include text within the explain-header div as a container for my explanations: /*Explain Bubble*/ .explain-container { position: relative; overflow: hidden; max-width: 70vw; max-height: 50vh; background-c ...

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

Concealing Contact Form Using Javascript

Upon making adjustments to a website, I encountered an issue with the contact form. The form is meant to be hidden on page load and only appear when the envelope icon is clicked. However, currently the form is visible by default, and clicking the envelope ...

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011). The idea is quite straightforward: by using a pre element to mirror the input in the ...

JavaScript is unable to make changes to the page once it has finished loading

I have implemented a JavaScript code that allows me to send messages in a chat interface: function sendMessageToChat(conversation, message) { $("#content").html(conversation + message); $(".current-msg").hide(); $(".current-msg").delay(500).fadeIn ...

Can anyone assist me in identifying the issue causing my Bootstrap 5.0 carousel to malfunction?

Trying to troubleshoot why the carousel isn't responding to arrow clicks. Appreciate any assistance on this issue! <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2 ...