Horizontal Scroll in Bootstrap 4

0

I'm trying to make a list of products, but I want to list them horizontally. The problem is that the list exceeds the limits of the container, the scroll does not appear to continue seeing the images.

I hope you understand what I say.

Thanks

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="row d-flex flex-row flex-nowrap">

<div class="col-md-3">
<div class="thumbnail">
<a href="#">
<img class="card-img-top" src="http://lorempixel.com/400/200">
<div class="caption">
<p>This is a wider card with supporting text below as a natural</p>
</div>
</a>
</div>
</div>

<div class="col-md-3">
<div class="thumbnail">
<a href="#">
<img class="card-img-top" src="http://lorempixel.com/400/200">
<div class="caption">
<p>This is a wider card with supporting text below as a natural</p>
</div>
</a>
</div>
</div>

<div class="col-md-3">
<div class="thumbnail">
<a href="#">
<img class="card-img-top" src="http://lorempixel.com/400/200">
<div class="caption">
<p>This is a wider card with supporting text below as a natural</p>
</div>
</a>
</div>
</div>

<div class="col-md-3">
<div class="thumbnail">
<a href="#">
<img class="card-img-top" src="http://lorempixel.com/400/200">
<div class="caption">
<p>This is a wider card with supporting text below as a natural</p>
</div>
</a>
</div>
</div>

<div class="col-md-3">
<div class="thumbnail">
<a href="#">
<img class="card-img-top" src="http://lorempixel.com/400/200">
<div class="caption">
<p>This is a wider card with supporting text below as a natural</p>
</div>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
    
asked by 04.05.2018 в 21:42
source

0 answers