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 = > <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> class "customer-details row" < = > div class "contact-information col-xl-7 col-lg-7 col-md-7 col-12" 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 = > <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> class "customer-details-new" < = > div class "contact-information-new" .customer-details { : grid;
  grid-template-columns: fr fr;
  grid-template-rows: repeat( , px);
}

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

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

.customer-details- { : none;
}

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

  .customer-details- { : grid;
    grid-template-columns: %;
    grid-template-rows: px px;
  }
  
  .contact-information- {
    grid-row: ;
    grid-column: ;
  }
  
  .items-selected- {
    grid-row: ;
    grid-column: ;
  }
} display 3 2 2 500 1 1 1 2 new display 767 display new display 100 500 750 new 1 1 new 2 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.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Why I Prefer Bootstrap Grid Over CSS Grid

Too Long; Didn't Read

Company Mentioned

Ritta Buyaki

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Why I Prefer Bootstrap Grid Over CSS Grid

Too Long; Didn't Read

Company Mentioned

Ritta Buyaki

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES