How to change columns order on window resize in bootstrap 3 grid?
Here an image what i try to get:
Change bootstrap order on window resize
PROBLEM SOLVED!
CODE:
<div class="row">
<div class="col-lg-2 col-md-6 col-xs-6">Box1
</div>
<div class="col-lg-2 col-lg-push-8 col-md-6 col-xs-6">Box2
</div>
<div class="col-lg-8 col-lg-pull-2 col-md-12 col-xs-12">Box3
</div>
</div>
You can add multiple classes for different window size. use this code in your local html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-lg-4 col-md-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-lg-4 col-md-6" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-lg-4 col-md-12" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
</div>
</div>
</body>
</html>
On bigger screen you can see 2 and 3 columns respectively but in print view why every col is in new line ?
because Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with a flexbox and is fully responsive.
I have the following HTML:
<div class="d-sm-flex flex-sm-row flex-sm-row-reverse">
<div class='ml-2'></div>
<div class='ml-2'></div>
<div class='ml-2'></div>
</div>
Which works as intended, howeer in XS mode I want to display columns as usual. But if I set the div classes to col ml-2 then it ruins the flex display. How can I set this to display cols in XS but flex in SM and above?
So based on your comment here is what you can do:
<div class="container">
<div class="row">
<div class='col-4 col-sm-12 ml-2'>TEST</div>
<div class='col-4 col-sm-12 ml-2'>TEST</div>
<div class='col-4 col-sm-12 ml-2'>TEST</div>
</div>
</div>
I made use of Bootstrap's row and col and placed it all in a container. But the concept for the columns is that for sizes up and to sm it will be col-4 (you can change the column sizes to your desire) and for everything after sm it will be col-12 meaning it will fill the width.
Please try this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex flex-row-reverse">
<div class='col ml-2'>11</div>
<div class='col ml-2'>22</div>
<div class='col ml-2'>33</div>
</div>
<div class=" d-flex flex-row-reverse">
<div class='ml-2'>44</div>
<div class='ml-2'>55</div>
<div class='ml-2'>66</div>
</div>
</body>
</html>
I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?
...
<div class="row pt-4" id="cards">
<div class="card-deck">
// THIS IS THE CARD WITH THE WIDENED BUTTON
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
// THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
<div class="card-body">
<h5 class="card-title">Spirituality</h5>
<p class="card-text">Connect to something larger than yourself</p>
Set a Goal
</div>
</div>
...
</div>
</div>
...
Here's what the buttons look like:
Just wrap your anchor in another div
<div>
Set a Goal
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<div>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
OR
Just add align-items-center class on the flex div
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To you button class, add mx-auto to center the button and mt-auto to push the button at the bottom of the card.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to build two rows with Bootstrap 4, the one should be displayed on devices with viewport < tablet and the other > tablet. In other words, once the one is visible, the other is hidden. I am using the native d-- classes from Bootstrap 4, but in the > tablet case they break the columns somehow. I am not sure, if it's bug or just me, but I am stick with this for hours. Here is a simple example that I've made to represent the issue.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-block">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
You need to use d-md-flex class because d-md-block override flex property of bootstrap 4.....check this i have added d-md-flex class
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-flex">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
new to Bootstrap and having some issues with nested columns. for som reason they are disproportionate. First pair of nested columns are "compressed" in half but those in the second are proportioned just fine. see below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
Any help on how to fix the alignment would be really appreciates. if this is just a limitation then i guess a new layout will be in order...
thanks,
Marc
There are couple of mistakes in your code. First is that your text is showing col-xs-6 for the nested columns on the left but you are actually setting them col-xs-6 that's why they were covering half of the width only.
Second one is that you are closing the right div col-xs-4 before including nested div.
Here's is your working code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">.col-sm-8
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>