Maybe I am blind, but my Bootstrap Grid is not behaving as expected.
Shouldn't it fill the whole row? Image of possily wrong behavior
<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
<div class="col-4 row bg-info" style="max-height: 60vh;">
<div class="col-12 row" style="max-height: 15vh;">
<div class="col-8 bg-danger row">
<div class="col-5 text-right"><h5>0</h5>Heim</div>
<div class="col-1 text-center"><h5>:</h5></div>
<div class="col-5 text-left"><h5>0</h5>Gast</div>
<div class="col-1"></div>
<div class="col-12"><p class="text-sm-center">Spielstand</p></div>
</div>
<div class="col-4 bg-success row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
</div>
</div>
</div>
</div>
You must remember that "row" class has set default properties:
margin-right: -15px;
margin-left: -15px;
And "col-anything" classes have set default properties:
padding-right: 15px;
padding-left: 15px;
That's why your idea don't work as you expected.
Bootstrap 5 (update 2021)
The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 (original answer)
Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...
"In a grid layout, content must be placed within columns and only
columns may be immediate children of rows."
<div class="row py-0">
<div class="col-4 bg-info" style="max-height: 60vh;">
<div class="row" style="max-height: 15vh;">
<div class="col-8 bg-danger">
<div class="row">
<div class="col-5 text-right">
<h5>0</h5>Heim
</div>
<div class="col-1 text-center">
<h5>:</h5>
</div>
<div class="col-5 text-left">
<h5>0</h5>Gast
</div>
<div class="col-1"></div>
<div class="col-12">
<p class="text-sm-center">Spielstand</p>
</div>
</div>
</div>
<div class="col-4 bg-success">
<div class="row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left">
<p class="text-sm-center">Teamfouls</p>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mKFXWjc39k
Related
I have a 3 row layout and inside of it there are multiple column and row combinations.
I tried this solution, but I couldn't do it to my code. How can I get a Bootstrap column to span multiple rows?
I have problem with 2nd row, I want to align 3rd column.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-6 defect-col">deneme</div>
<div class="col-6 defect-col">deneme</div>
</div>
</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header text-center">Aksiyonlar</div>
</div>
<div class="col-10 column-aligner action-notes">deneme</div>
</div>
</div>
Firstly, rows should always be children of containers. The two have offsetting margins that need to balance. Review the grid docs. I've used the container-fluid class so they're full width.
Then, your columns need to total 12 for a given row (or at least should have the same total for each row). If you can't make that work, consider using Bootstrap's flexbox layout instead of rows and columns.
Also, your nested columns should span the entire row if you want them to stack, meaning you need col-12 instead of col-6 for those.
The only thing remaining is to set heights on the columns, if you actually need them to stretch. That can be done in several ways.
I've added interior divs and some CSS here for demonstration purposes. You wouldn't need those unless you want to apply color as I have.
/* styles for demo only */
.row>div>div:not(.row) {
background: #ddd;
border: 1px dotted #aaa;
}
.today-wrapper>.row {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid past-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid today-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">
Bugün
</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-12 defect-col">
<div>deneme</div>
</div>
<div class="col-12 defect-col">
<div>deneme</div>
</div>
</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid action-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner action-notes">
<div class="column-header text-center">
<div>Aksiyonlar</div>
</div>
</div>
<div class="col-10 column-aligner action-notes">
<div>deneme</div>
</div>
</div>
</div>
the sum of the columns must be 12, if it gives more or less, the layout will be harmed.
I made some adjustments to the columns.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container-fluid text-center">
<div class="past-wrapper bg-danger">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper bg-warning">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">
<div class="w-100 defect-col">deneme</div>
<div class="w-100 defect-col">deneme</div>
</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper bg-primary">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header">Aksiyonlar</div>
</div>
<div class="col-11 column-aligner action-notes">deneme</div>
</div>
</div>
</div>
I have following:
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
This is view with screen size >992:
This is view with screen <992:
How can I display elements below each other as is viewed in image2 ? I do not know why, but "display:block" is not working.
You can use
<div class="row">
to create separate rows of content satisfying your needs.
I recommend to read about grid system in this article:
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
</div>
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
In bootstrap 5 there is an option named order. So in your question, You can add a class named order-md-2 to things that you want to shift down and order-md-1 to things that you want to shift up.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
Hope my answer helps you
you could simply use the flex-direction of the flexbox.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div class='contacts'>
<div class='mail'>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div class='phone'>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
</div>
Inside CSS:
.contacts {
display: flex;
flex-direction: column;
}
This should allow you to orient both of your div-containers to be underneath each other.
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try .
<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6 bg-primary" style="height:250px">d</div>
<div class="col-sm-6 bg-info" style="height:500px">d</div>
</div>
<div class="row">
<div class="col-sm-6 bg-info" style="height:250px">z</div>
</div>
</div>
This is what I need to get
The layout is three columns with the center column having 2 rows.
Try this:
<div class="row">
<div class="col-sm bg-success" style="height:500px">d</div>
<div class="col-sm">
<div class="row">
<div class="col-sm-12 bg-primary" style="height:250px">d</div>
</div>
<div class="row">
<div class="col-sm-12 bg-info" style="height:250px">z</div>
</div>
</div>
<div class="col-sm bg-info" style="height:500px">d</div>
</div>
Try this code, Hope it will help you.
<div class="row">
<div class="col-md-3" style="height:100px; background-color:black">d</div>
<div class="col-md-6 ">
<div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
<div class="box mx-auto bg-info" style="height:100px;">b</div>
</div>
<div class="col-md-3 bg-info" style="height:100px">z</div>
</div>
I divided the one row into 3 columns, both side boxes has a size of 3 and mid box have a size of 6 then check the class col-auto-p2 & box mx-auto.
Please try this one with Bootstrap 4
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
<div class="col-md-6">
<div class="row h-100">
<div class="col-12 h-50" style="padding-bottom: 10%;">
<div class="bg-info h-100">
</div>
</div>
<div class="col-12 h-50" style="padding-top: 10%;">
<div class="bg-info h-100">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
</div>
</div>
You can change the padding on inner columns. Don't forget to put row inside a container or container-fluid as described here
https://getbootstrap.com/docs/4.2/layout/grid/
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Please check the working snippet will help you
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
<div class="row" style="position:relative;height:500px;">
<div class="col-sm-12 bg-primary" style="height:200px">d</div>
<div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
</div>
</div>
<div class="col-sm-4 bg-info" style="height:500px">z</div>
</div>