186 reads

Why I Prefer Bootstrap Grid Over CSS Grid

by Ritta BuyakiDecember 16th, 2020

Too Long; Didn't Read

This page is thanks to Bootstrap! Why I Prefer Bootstrap Grid Over? Bootstrap grid over CSS Grid Over CSS Grid. The Sling Bag title and its details wrap below the image of the handbag, while on a small screen? This page includes a form with an image of a handbag and a price tag of $1,700. This page uses Bootstrap to make it easier to read on the small screen and display the contents of the bag. It is now available to download in the U.S.

Company Mentioned

featured image - Why I Prefer Bootstrap Grid Over CSS Grid

How best can one make the Sling Bag title and its details, wrap below the image of the handbag, while on a small screen?

This page is thanks to Bootstrap!

<div class="customer-details row">
            <div class="contact-information col-xl-7 col-lg-7 col-md-7 col-12">
                <h3> Contact Information </h3>
                <form action="#">
                    <label for="fname" class="pt-4 pr-4"> First Name: </label>
                    <input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br>
                    <label for="lname" class="pr-4"> Last Name: </label>
                    <input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br>
                    <label for="telno" class="pr-4"> Phone No: </label>
                    <input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br>
                </form>
                <h4 class="pt-4"> Recipient's Delivery Address </h4>
                <form action="#">
                    <label for="idnumber" class="pt-4 pr-4"> ID Number: </label>
                    <input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br>
                    <label for="companyname" class="pr-4"> Company Name: </label>
                    <input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname"
                        name="companyname"> <br> <br>
                    <label for="apartmentname" class="pr-4"> Apartment Name: </label>
                    <input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname"
                        name="apartmentname"> <br> <br>
                </form>
                <h4 class="pt-4"> Additional Information </h4>
                <form action="#">
                    <label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label>
                    <textarea name="moreinfo" id="moreinfo" cols="30" rows="5">
                </textarea>
                </form>
                <div class="complete pt-4">
                    <a href="index.html" class="btn complete-btn"> <span> Complete </span> </a>
                </div>
            </div>
            <div class="items-selected col-xl-5 col-lg-5 col-md-5 col-12">
                <div class="items-selected-title">
                    <h4> <a href="#"> Your Basket </a> </h4>
                </div>
                <div class="row media items-selected1 border-top border-bottom p-5">
                    <div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left">
                        <a href="handbags.html"> <img
                                src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png"
                                class="media-object img-responsive w-75" alt="#"> </a>
                    </div>
                    <div class="col-xl-5 col-lg-5 col-md-5 col-12 media-body">
                        <h4 class="media-heading text-nowrap">Sling Bag</h4>
                        <p class="text-nowrap"> Price: sh.700 </p>
                        <p class="text-nowrap"> Quantity: 3 </p>
                    </div>
                </div>
                <div class="row media items-selected2 border-bottom p-5">
                    <div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left">
                        <a href="handbags.html"> <img src="asset/images/moreimg1.png"
                                class="media-object img-responsive w-75" alt="#"> </a>
                    </div>
                    <div class="col-xl-7 col-lg-5 col-md-5 col-12 media-body">
                        <h4 class="media-heading text-nowrap">Hobo Bag</h4>
                        <p class="text-nowrap"> Price: sh.880 </p>
                        <p class="text-nowrap"> Quantity: 5 </p>
                    </div>
                </div>

                <div class="total pt-2">
                    Total: sh.6,500
                </div>
            </div>
        </div>

I created a div tag with class name customer-details. Inside customer-details, I have .customer-information set to col-lg-7 and .items-selected set to col-lg-5. Added class row to class media, in the .items-selected. Inside class media, I set the .media-left to col-lg-7 and media-body to .col-lg-5. As a result, the contents of the .media-body wrapped below the image in the .media-left. This saved me a lot of time and energy.

How could I have achieved this using the CSS grid?

I would have to write another code and wrap my code in class customer-details-new. The .customer-details-new has customer-details-new and items-selected-new. Use Bootstrap cards in the .items-selected-new. Then, give the images a class of card-img-top, so that the image appears on the top and the text wraps below the image. Then, in the media query of the desired screen size, I set .customer-details to display none as shown below:

<div class="customer-details-new">
            <div class="contact-information-new">
                <h3> Contact Information </h3>
                <form action="#">
                    <label for="fname" class="pt-4 pr-4"> First Name: </label>
                    <input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br>
                    <label for="lname" class="pr-4"> Last Name: </label>
                    <input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br>
                    <label for="telno" class="pr-4"> Phone No: </label>
                    <input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br>
                </form>
                <h4 class="pt-4"> Recipient's Delivery Address </h4>
                <form action="#">
                    <label for="idnumber" class="pt-4 pr-4"> ID Number: </label>
                    <input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br>
                    <label for="companyname" class="pr-4"> Company Name: </label>
                    <input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname"
                        name="companyname"> <br> <br>
                    <label for="apartmentname" class="pr-4"> Apartment Name: </label>
                    <input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname"
                        name="apartmentname"> <br> <br>
                </form>
                <h4 class="pt-4"> Additional Information </h4>
                <form action="#">
                    <label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label>
                    <textarea name="moreinfo" id="moreinfo" cols="30" rows="5">
            </textarea>
                </form>
                <div class="complete pt-4">
                    <a href="index.html" class="btn complete-btn"> <span> Complete </span> </a>
                </div>
            </div>

            <div class="items-selected-new">
                <div class="items-selected-title">
                    <h4> <a href="#"> Your Basket </a> </h4>
                </div>
                <div class="card row p-3">
                    <a href="handbags.html"> <img
                            src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png"
                            class="card-img-top img-responsive w-50" alt="#"> </a>
                    <div class="card-body col-lg-5">
                        <h4 class="card-title">Sling Bag</h4>
                        <p class="card-text">Price: sh.700</p>
                        <p class="card-text"> Quantity: 3 </p>
                    </div>
                </div>

                <div class="card row mt-2 p-3">
                    <a href="handbags.html"> <img src="asset/images/moreimg1.png"
                            class="card-img-top img-responsive w-50" alt="#"> </a>
                    <div class="card-body">
                        <h4 class="card-title">Hobo Bag</h4>
                        <p class="card-text">Price: sh.880</p>
                        <p class="card-text"> Quantity: 5 </p>
                    </div>
                </div>

                <div class="total pt-2">
                    Total: sh.6,500
                </div>
            </div>
        </div>

.customer-details {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: repeat(2, 500px);
}

.contact-information {
  grid-row: 1;
  grid-column: 1;
}

.items-selected {
  grid-row: 1;
  grid-column: 2;
}

.customer-details-new {
  display: none;
}

@media only screen and (max-width: 767px) {
  .customer-details {
    display: none;
  }

  .customer-details-new {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 500px 750px;
  }
  
  .contact-information-new {
    grid-row: 1;
    grid-column: 1;
  }
  
  .items-selected-new {
    grid-row: 2;
    grid-column: 1;
  }
}