Before you go, check out these stories!

0
Hackernoon logoWhy I Prefer Bootstrap Grid Over CSS Grid by@ritta-buyaki

Why I Prefer Bootstrap Grid Over CSS Grid

Author profile picture

@ritta-buyakiRitta Buyaki

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

This is how it will look:

As you can see, with the CSS grid, my code is longer with a media query. With Bootstrap grid classes, my code is less, neat with no media query.

For this reason and many more, which we can discuss later, I prefer using Bootstrap grids compared to using CSS grids.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.