What is the best way to adjust a 5-row bootstrap grid to fill the entire window space?

Trying to achieve a layout in my bootstrap project with 5 rows that span the full width has been challenging. I'm struggling to grasp how to accomplish this...

Here is the initial code snippet:

<div class="row car-list btn-group" style="border: 1px solid red">
<label class="car-image pr-0 col-lg-2 col-xs-1" style="border: 1px solid red">
    <div class="ml-0">
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
        <img src="images/form-cars/1.png" alt="">
    </div>
</label>

... (full original code here)

This resulted in the layout shown in the following image:https://i.sstatic.net/8jsbc.png

Second code attempt:

<div class="row car-list btn-group" style="border: 1px solid red">
<label class="car-image pr-0 col-6 col-md-3" style="border: 1px solid red">
    <div class="ml-0">
         ... (more code here) ...
</label>

... (more modified code here) ...

This approach produced the layout visible in the image linked https://i.sstatic.net/FyS8h.png

I aim to have a table structure with 5 equal rows that utilize the entire width of the page. Any recommendations on how to properly implement this?

Edit: The desired format should maintain mobile responsiveness through the use of col-6 as demonstrated in the second example.

htmlcssbootstrap-4

Answer №1

Instead of using a specific number, consider using this code: <div class="col-md col-6">

By doing this, you will achieve equal column widths on desktop and display two items per row on mobile screens.

Here is an example: https://www.bootply.com/NgisB4j3qG

Answer №2

If you're looking for tips on creating a 5 column layout with Bootstrap 4, I recommend checking out this article here.

Keep in mind that the initial width size is set to 12, so to achieve 5 identical items each should be sized at 2. You can customize the spacing using CSS to differentiate them as needed.

Answer №3

Here is a suggestion to meet your requirements:

        <div class="row d-flex justify-content-center">
            <label class="car-image pr-0 col" style="border: 1px solid red">
                <div class="ml-0">
                    <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                    <img src="images/form-cars/1.png" alt="">
                </div>
            </label>
            <label class="car-image pr-0 col" style="border: 1px solid red">
                <div class="ml-0">
                    <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                    <img src="images/form-cars/1.png" alt="">
                </div>
            </label>
            <label class="car-image pr-0 col" style="border: 1px solid red">
                <div class="ml-0">
                    <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                    <img src="images/form-cars/1.png" alt="">
                </div>
            </label>
            <label class="car-image pr-0 col" style="border: 1px solid red">
                <div class="ml-0">
                    <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                    <img src="images/form-cars/1.png" alt="">
                </div>
            </label>
            <label class="car-image pr-0 col" style="border: 1px solid red">
                <div class="ml-0">
                    <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                    <img src="images/form-cars/1.png" alt="">
                </div>
            </label>
        </div>

Answer №4

Eliminate the column attribute from all labels, ensuring they do not appear distorted on small screens. Perhaps consider arranging them in 2 rows?

To replace the col-attribute, refer to this guide on columns with equal widths

Answer №5

Eliminate col-lg-2 to avoid restricting the width of your div.

You have the option to use this code snippet:-

https://jsfiddle.net/tLyh7eab/2/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" integrity="sha256-D9AvR0EzkNZoWZVSvI3ch+uf/Z5izrIpcbsykVphwPU=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>


<style>
    .car-list{
        display: flex;
        flex :1;
        justify-content: center;
        flex-wrap: nowrap;
    }

    img{
        width: 70px;
    }
</style>

<div class="row car-list btn-group" style="border: 1px solid red">
        <label class="car-image pr-0 col" style="border: 1px solid red">
            <div class="ml-0">
                <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
                <img src="car.png" alt="">
            </div>
        </label>

        <label class="car-image px-0 col" style="border: 1px solid red">
            <div>
                <input type="radio" name="car-rental-class" class="required" id="car-rental-class-travel" autocomplete="off" data-class="travel" value="travel" onclick="getpricing();"> Travel Car<br>(2014 - 2020 Toyota Corolla)
                <img src="car.png" alt="">
            </div>
        </label>

        <label class="car-image px-0 col" style="border: 1px solid red">
            <div class="ml-3 ml-md-2">
                <input type="radio" name="car-rental-class" class="required" id="car-rental-class-suv" autocomplete="off" data-class="suv" value="suv" onclick="getpricing();"> SUV<br>(2016 - 2020 Dodge Journey)
            <img src="car.png" alt="">
            </div>
        </label>

        <label class="car-image px-0 col" style="border: 1px solid red">
            <div>
                <input type="radio" name="car-rental-class" class="required" id="car-rental-class-minivan" autocomplete="off" data-class="minivan" value="minivan" onclick="getpricing();"> Minivan<br>(2016 - 2020 Toyota Sienna)
            <img src="car.png" alt="">
            </div>
        </label>

        <label class="car-image pr-0 col" style="border: 1px solid red">
            <div>
                <input type="radio" name="car-rental-class" class="required" id="car-rental-class-convert" autocomplete="off" data-class="convert" value="convert" onclick="getpricing();"> Convertible<br>(2015 - 2017 Ford Mustang)
            <img src="car.png" alt="">
            </div>
        </label>
        </div>

Answer №6

To create a grid with 5 divs in one single row, add a blank div/label at the start and end of the grid with the class col-lg-1.

<div class="row">
<label class="col-lg-1"></label>
<label class="col-lg-2">car 1</label>
<label class="col-lg-2">car 2</label>
<label class="col-lg-2">car 3</label>
<label class="col-lg-2">car 4</label>
<label class="col-lg-2">car 5</label>
<label class="col-lg-1"></label>
</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

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

javascriptjqueryhtmlcss

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: https://i.sstatic.net/IVdz8.png I am not certain if this ...

cssflexbox

Tips for utilizing the grid system in Bootstrap 4 to transform a dropdown menu into the desired shape shown in the image

I am struggling to create a dropdown menu similar to the one highlighted with a red border in the image, The screenshot I referenced is from the bootswatch website (a bootstrap theme). Although I attempted to use bootstrap flex utility, I was unable to a ...

htmlcssbootstrap-4

JavaScript calculator not calculating values correctly

I am facing an issue with my JavaScript calculator. The problem occurs when I try to perform addition, such as adding 5+5, the result gets stuck at 10 and does not continue to increment (10, 15, 20, etc). Below is the code snippet that I am using: func ...

javascripthtml

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

csssafari

Dynamic CSS containers that adjust according to browser and screen dimensions

01) In my attempt to create a row with two content boxes, I encountered an issue. The first box is supposed to display an image and the second box text. However, I am struggling to make it responsive and interactive based on different browser and screen si ...

htmlcsssizeinteractive

Angular reduces image width to zero

Looking to include an image in an Angular template, where the width attribute is equal to a variable width that sometimes holds the value null. In cases where width = null, I aim to have width = "" (or no width attribute at all). However, Angular assigns ...

htmlangularimageangular-template

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

javascriptcssreactjsnode.jstailwind-css

The functionality of the JavaScript click function is limited to a single execution

In my dropdown menu, I have a submit function that triggers whenever any children of the dropdown are clicked. However, I now need to exclude a specific li element from this function because it requires inserting a tracking ID in a popup iFrame. The code ...

javascriptjqueryhtml

Leveraging the power of the jQuery load function alongside HTML forms in web

Currently in the process of creating a fresh website and considering implementing jQuery's load() function to bring content from various html pages into my main page. load() is functioning smoothly. Below is my current code: Main.html page where cont ...

htmljqueryajax

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

Fading in and out occurs several times while scrolling through the window

My goal is to update the logo image source with a fadeIn and fadeOut effect when scrolling up or down. The issue I'm facing is that the effect happens multiple times even after just one scroll, resulting in the logo flashing many times before finally ...

javascriptjqueryhtmlscrollfade

Guide on executing a function upon clicking the ok button in an alert box in PHP and MySQL

function notify(message) { alert(message); handleAlert(); } function handleAlert() { alert('Alert has been triggered.'); } //I am looking for a way to trigger an update or insert action when the user clicks 'OK' on the alert ...

javascriptphpjquerycssajax

"Enhance text formatting by making it stand out when hovered over

I am encountering an issue where the hover action for a specific letter begins before the mouse actually touches the text. In this case, I want the letter 'P' in 'Paul' to turn white when hovered over. The image illustrates the distanc ...

csshoverhighlight

Is there a way to change this from webkit to moz?

Is there a way to change this code from webkit to moz? background-color: #fff; background-image: -moz-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px), -moz-linear-gradient(#EEE .05em, transparent .05em); ...

csswebkit

Need help troubleshooting Bootstrap not functioning correctly in a PHP file within the layout/index.php when implementing modularity techniques?

Currently, I am diving into learning how to create a website using PHP and implementing modularity techniques. I recently successfully integrated Bootstrap into a PHP file. However, when I attempted to create a new folder named 'layout' within my ...

phphtmlcssbootstrap-4

Simultaneously scrolling left and fading in with jQuery

I've come across this code that works well in scrolling my divs to the left. However, I'm looking to add a fading effect while they are scrolling. Is there a way to achieve this? $('div#line1').delay(1000).show("slide", { direction: "r ...

jquerycssjquery-ui

Troubleshooting: Issues with Integrating Javascript and CSS into

I'm still new to this platform, so please correct me if I make any mistakes. My goal is to create a "task table" that allows users to edit existing tasks and add new ones. Thanks to the base template provided by Ash Blue, I've managed to program ...

javascriptjqueryhtmlcsshtml-table

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

javascripthtmlcssgoogle-chromeinternet-explorer