CODEWITHSUNDEEP
htmlcssreactjsbootstrap-4react-bootstrap
Terraya
Terraya

Reputation: 193

Bootstrap - row overflow with columns (scroll)

is there a possibility to make something like:

<div className="row">
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
</div>

BUT i want a overflow , not a new Line

Thanks for help!

Upvotes: 0

Views: 797

Answers (2)

Turnip
Turnip

Reputation: 36702

Bootstrap has the flex-nowrap class available for this purpose.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row flex-nowrap">
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
</div>

Codepen Version

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use flex-wrap: nowrap to row with bootstrap class flex-nowrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="row flex-nowrap">
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
</div>

Upvotes: 0

Related Questions