Horizontal scrollable div's in a bootstrap row
Please check. Is it what you want to achieve?
CodePen •
JSFiddle
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container testimonial-group">
<div class="row text-center">
<div class="col-xs-4">1</div><!--
--><div class="col-xs-4">2</div><!--
--><div class="col-xs-4">3</div><!--
--><div class="col-xs-4">4</div><!--
--><div class="col-xs-4">5</div><!--
--><div class="col-xs-4">6</div><!--
--><div class="col-xs-4">7</div><!--
--><div class="col-xs-4">8</div><!--
--><div class="col-xs-4">9</div>
</div>
</div>DIV with horizontal scroll - Bootstrap 4
.sidebar { background-color: #ececec; width: 3000px; /*overflow-x: scroll; overflow-y: hidden; white-space: nowrap;*/}
.wallet { background-color: #7b67db; background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%); width: 90%; border-radius: 10px; -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1); height: 167px; widows: 90%; margin: 0 auto;}
.wallet-body { background-color: #fff; border-radius: 0 10px 10px 0;}
.raise { font-size: 0.8em; color: #b8b8b8; padding-top: 8px; margin-bottom: 8px;}
.fa-arrow-up { font-size: 0.8em; color: #b8b8b8; margin-top: -24px; margin-right: 56px;}
hr { margin-top: 0; margin-bottom: 14px;}
.balance { color: #697377; font-size: 0.8em; margin-bottom: -3px;}
.amount { color: #697377; font-size: 1.4em; font-weight: bold; margin-bottom: 20px;}
.btn-depositar { background-color: #7b67db; padding: 10px 70px 10px 70px; border-radius: 50px; color: #fff;}
.btn-depositar:hover { text-decoration: none; color: #fff; background-color: #5a50a5;}
.currency-symbol { vertical-align: middle; margin-top: 40px; margin-left: 5px;}
.addscrollbar{ overflow-x: scroll; display: flex;}<!DOCTYPE html>
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<div class="row scroller"> <div class="col-12 sidebar addscrollbar"> <!-- Pesos --> <div class="col-4 full-wallet float-left d-inline-block"> <div class="col-12 wallet pl-0 pr-0 mt-4"> <div class="col-lg-2 d-inline-block wallet-side"> <img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol"> </div> <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4"> <p class="raise">CLP$999.999.999</p> <!--<i class="fas fa-arrow-up float-right"></i>--> <hr> <p class="balance">Balance</p> <p class="amount">$999.999</p> <a href="#" class="btn-depositar">Depositar</a> </div> </div> </div> <!-- /Pesos-->
<!-- Bitcoin --> <div class="col-4 full-wallet float-left d-inline-block"> <div class="col-12 wallet pl-0 pr-0 mt-4"> <div class="col-lg-2 d-inline-block wallet-side"> <img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol"> </div> <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4"> <p class="raise">CLP$999.999.999</p> <!--<i class="fas fa-arrow-up float-right"></i>--> <hr> <p class="balance">Balance</p> <p class="amount">$999.999</p> <a href="#" class="btn-depositar">Depositar</a> </div> </div> </div> <!-- /Bitcoin-->
<!-- Ethereum--> <div class="col-4 full-wallet float-left d-inline-block"> <div class="col-12 wallet pl-0 pr-0 mt-4"> <div class="col-lg-2 d-inline-block wallet-side"> <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol"> </div> <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4"> <p class="raise">CLP$999.999.999</p> <!--<i class="fas fa-arrow-up float-right"></i>--> <hr> <p class="balance">Balance</p> <p class="amount">$999.999</p> <a href="#" class="btn-depositar">Depositar</a> </div> </div> </div> <!-- /Ethereum-->
<!-- Ethereum--> <div class="col-4 full-wallet float-left d-inline-block"> <div class="col-12 wallet pl-0 pr-0 mt-4"> <div class="col-lg-2 d-inline-block wallet-side"> <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol"> </div> <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4"> <p class="raise">CLP$999.999.999</p> <!--<i class="fas fa-arrow-up float-right"></i>--> <hr> <p class="balance">Balance</p> <p class="amount">$999.999</p> <a href="#" class="btn-depositar">Depositar</a> </div> </div> </div> <!-- /Ethereum--> </div> </div>
</body>
</html>Horizontal scroll in bootstrap 4
For an approach to this, you will have to change the default behaviours of the Bootstrap classes. We will have to use flex-nowrap on the cards container for the smallest media screen and change the overflow-x style to auto. In summary, we will use the nexts main changes:
CSS
@media only screen and (max-width : 576px)
{
.mobile-card-container > .row {
overflow-x: auto;
}
}
Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.
HTML structure
<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
<div class="row text-center flex-nowrap flex-sm-wrap">
<!-- Cards will be here -->
</div>
</div>
So, for XS screen devices, the flex-nowrap class will apply in conjunction with the previous defined style, approaching what you where searching for. On the others type of screens (SM, MD, LG) the default behaviour of Bootstrap classes will be keeped (Note the usage of flex-sm-wrap class).
To finish, you can check the next working example (play with the windows resize on the full screen mode):
@media only screen and (max-width : 576px){ .mobile-card-container > .row { overflow-x: auto; }}
.card-background { background-color: #ffffff; border-radius: 6px; margin: 16px 5px; height: 100px; -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1); -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1); box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Mobile Card Container --><div class="container-fluid mobile-card-container"> <div class="row text-center flex-nowrap flex-sm-wrap"> <!-- Card 48 cuotas --> <div class="col-10 card-background mx-sm-auto bg-danger"> Card content </div> <!-- /Card 48 cuotas --> <!-- Card 36 cuotas--> <div class="col-10 card-background mx-sm-auto bg-primary"> Card Content </div> <!-- /Card 36 cuotas --> <!-- Card 24 cuotas --> <div class="col-10 card-background mx-sm-auto bg-danger"> Card Content </div> <!-- /Card 24 cuotas --> </div></div>Bootstrap horizontal scroll for div with min-width when inside col
Is this what you were going for? The code is pretty much self-explanatory. I did place the new css in a class .wrapScroll as opposed to inline.
You mention the need for a min-width but I did not understand that need so did not use min-width.
.wrapScroll {
white-space: nowrap;
overflow-x: auto;
border: 1px solid orange;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div style="border: solid 1px black" class="col-4">
Col container 1
<div class="wrapScroll">Col content 1 - Let's make this a bit longer for demonstration purposes...</div>
</div>
<div style="border: solid 1px blue" class="col-4">
Col container 2
</div>
<div style="border: solid 1px yellow" class="col-4">
Col container 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>Bootstrap 4 horizontal scroll with card-group
First you need to add overflow-x for horizontal scroll,
then you should have a max-width that after it the scroll functionality appear and because it's text you should white-space no wrap to be in one line if it's no long text.
.card {overflow-x: scroll;white-space: nowrap;max-width: 150px;padding: 1rem;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="row"> <div class="list"> <div class="card-group"> <div class="card" ng-repeat=""> data components are here </div> </div> </ul> </div>Bootstrap horizontal scrolling
It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox.
Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout..
<div class="container-fluid">
<div class="row flex-row flex-nowrap">
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
</div>
</div>
Bootstrap 4 Demo: http://codeply.com/go/GoFQqQAFhN
Also see: Horizontally scrollable list of cards in Bootstrap
For Bootstrap 3, it would be done with some CSS for the flexbox..
.
row > .col-xs-3 {
display:flex;
flex: 0 0 25%;
max-width: 25%
}
.flex-nowrap {
-webkit-flex-wrap: nowrap!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
}
.flex-row {
display:flex;
-webkit-box-orient: horizontal!important;
-webkit-box-direction: normal!important;
-webkit-flex-direction: row!important;
-ms-flex-direction: row!important;
flex-direction: row!important;
}
Bootstrap 3 Demo: http://codeply.com/go/P13J3LuBIM
Bootstrap 4 card horizontal Scroll issue?
The reason why your cards are getting smaller is because .card-group is displayed as flex and its card items' flex-grow is set to 1, which means they will take up equal widths:
To get what you want, you can define a custom class along with its default .card-group (so that you don't override the default card-group styles), set its overflow style as well as its children <card>'s flex-basis so that they have a default width. You will need to set card-group's wrapping style to no-wrap as well as the default is set up wrap.
CSS
@media (min-width: 576px) {
.card-group.card-group-scroll {
overflow-x: auto;
flex-wrap: nowrap;
}
.card-group.card-group-scroll > .card {
flex-basis: 35%;
}
}
Result
fiddle: http://jsfiddle.net/b2jw13go/1/
Related Topics
What Is The Definition of "The Baseline of Parent Box"
How to Customize Font Size in Ionic Framework
CSS Takes Effect After Page Has Rendered
How to Make Image Responsive Inside a Div
CSS3 Transform Matrix to Full Transform Conversion
Vertical Line with Dots in Ends and Between
Ionic Item with Left and Right Aligned Text
What to Use Instead of Contains() in CSS3
Add CSS to Head from Template File in Magento
How Specify Two CSS Classes: from Property and Conditional Class
Why Is My Multi-Column Spacing Not Working in Chrome
CSS Background Image Before and After H1 Tag
Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here