How prevent column from breaking bootstrap

Question

<div id="mydiv" class="bg-danger row">
    <div>
        <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280">
    </div>
    <div class="bg-warning pt-3 ml-4">
        <h2 class="font-weight-bold">{{$album->nome}}</h2>
        <h5 class="mb-5"><a href="">Autore</a></h5>
        <small class="text-muted">8 brani - 24/01/2015</small>
    </div>
</div>

I want to prevent the break between two div inside #mydiv when the page is displayed on a smartphone

dippas · Accepted Answer · 2020-05-13 20:29:17Z

2

add flex-nowrap utility class to .row

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mydiv" class="bg-danger row flex-nowrap">
  <div>
    <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280">
  </div>
  <div class="bg-warning pt-3 ml-4">
    <h2 class="font-weight-bold">{{$album->nome}}</h2>
    <h5 class="mb-5"><a href="">Autore</a></h5>
    <small class="text-muted">8 brani - 24/01/2015</small>
  </div>
</div>

answered May 13, 2020 at 20:29

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How prevent column from breaking bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related