CODEWITHSUNDEEP
htmlcssbootstrap-4
user11981274
user11981274

Reputation:

How to make 5 row bootstrap grid take up whole window?

I am trying to make my bootstrap project 5 rows and take up the full width, but I am having issues understanding how to do this...

This code:

<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>

<label class="car-image px-0 col-lg-2 col-xs-3" 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="images/form-cars/2.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-lg-2 col-xs-3" 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="images/form-cars/3.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-lg-2 col-xs-3" 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="images/form-cars/4.png" alt="">
    </div>
</label>

<label class="car-image pr-0 col-lg-2 col-xs-2" 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="images/form-cars/5.png" alt="">
    </div>
</label>
</div>

Results in this:

enter image description here

And this code:

<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">
        <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 px-0 col-6 col-md-3" 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="images/form-cars/2.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-6 col-md-3" 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="images/form-cars/3.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-6 col-md-3" 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="images/form-cars/4.png" alt="">
    </div>
</label>

<label class="car-image pr-0 col-6 col-md-3" 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="images/form-cars/5.png" alt="">
    </div>
</label>
</div>

Results in this:

enter image description here

What I would like is the table to be 5 equal rows that take up the full width. Suggestions? What is the advised method for doing this properly?

Edit: I want to keep mobile functionality that is provided with col-6 in the second example.

Upvotes: 0

Views: 300

Answers (6)

ondrejruzicka
ondrejruzicka

Reputation: 641

Just remove number and try something like this: <div class="col-md col-6">

It'll make equal columns on desktop and two items per row on mobile.

Example: https://www.bootply.com/NgisB4j3qG

Upvotes: 1

Ashutosh Kolambkar
Ashutosh Kolambkar

Reputation: 392

Add 1 blank div/label at start and at end of the grid with the class as col-lg-1 the following code will give you 5 divs in one single row

<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>

Upvotes: 0

Ankit
Ankit

Reputation: 43

Remove col-lg-2 as it would restrict your div to always take that much space only.

You can use:-

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>

Upvotes: 0

jalal.robi
jalal.robi

Reputation: 144

Try this way. solution of 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>

Upvotes: 1

J1n
J1n

Reputation: 71

Remove the col-attribute from each label, but take care would look bad on small screens. Maybe think of 2 rows?

for the col-attribute look at the following colums with equal-width

Upvotes: 0

Lvcas
Lvcas

Reputation: 41

I suggest reading this article 5 column layout with Bootstrap 4

...also note that initial size of width is 12, so if you want 5 exactly same items every single one has to be of size 2 + adding some css to space them differently should resolve the problem.

Upvotes: 1

Related Questions