Bootstrap - row overflow with columns (scroll)

Question

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!

yes, exactly, it work with text and so on ... but not with columns .., whenever i add more columns then the size of 12 .. it creates a new Row or lets call it Line .. — Terraya
– Terraya, Commented May 19, 2020 at 10:36

Turnip · Accepted Answer · 2020-05-19 10:41:41Z

2

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

answered May 19, 2020 at 10:41

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

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

Comments

לבני מלכה · Accepted Answer · 2020-05-19 10:41:13Z

0

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>

answered May 19, 2020 at 10:41

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

1 Comment

לבני מלכה Over a year ago

tell me for more help

Collectives™ on Stack Overflow

Bootstrap - row overflow with columns (scroll)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related