Hello together
I tried to visualize the problem in the attached project, but i havent the rights to upload this here In it there are three rows with different number of cols. I have defined different behaviors at the breakpoints per row, depending on the number of columns.
When I look at the canvas in Bootstrap Studio, or use the preview function to display the page in the browser, the result in XL is correct. In the first row there are 2 columns next to each other, in the second row there are 4 columns next to each other and in the third row there are 6 columns next to each other.
If I now export the file, and then open the result in the browser, it looks different. Each col is then always 12 columns in each breakpoint, so I have one new row per col.
Where does this come from, what is going wrong here?
Thanks for your support.
Greetings Reto
Here is the HTML-Code generated in Bootstrap Studio:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>grid</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<div class="alert alert-info mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 mb-4 mb-md-0">
<div class="alert alert-info mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 mb-4 mb-md-0">
<div class="alert alert-success mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-md-0">
<div class="alert alert-success mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-md-0">
<div class="alert alert-success mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-md-0">
<div class="alert alert-success mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2 mb-4 mb-md-0">
<div class="alert alert-warning mb-0" role="alert"><span><strong>Alert</strong> text.</span></div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>