I already added 4 columns in the desktop view using bootstrap but I didn't understand how to set those 4 columns in the responsive view.
Bootstrap has various screen size related class. You can try
4 in desktop, 2 in Ipad/tab and 1 in mobile view.
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
</div>
Try it:
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
First you need to read official documentation from Bootstrap. So you can easily learn & use pre-defined classes of Bootstrap.
Helpful Links:
https://getbootstrap.com/docs/5.1/layout/grid/#how-it-works
https://getbootstrap.com/docs/5.1/layout/grid/#row-columns
https://getbootstrap.com/docs/5.1/layout/gutters/#horizontal--vertical-gutters
.l {
box-shadow: 0 0 0 1px #ccc;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<h5 class="mt-4 text-primary">With Columns Break</h5>
<div class="container py-3">
<div class="row row-cols-1 rows-cols-sm-2 row-cols-md-4 g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>
<h5 class="mt-4 text-primary">Without Columns Break</h5>
<div class="container py-3">
<div class="row g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>
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>
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
i m trying to center align three divs using bootstrap. i have a div with class container and it has three divs in it. i am trying to center align these three divs in the browser. i can get them to the center but they appear centered left. below is the code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container d-flex h-100">
<div class="row align-items-center">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
</div>
CHange your code to
<div class="container d-flex align-items-center h-100">
<div class="row">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
Ok, so i have figured out what was the issue. And here is the code below. Both the container and the row div are to be set to h-100 and .d-flex class applied to the row div.
<div class="container h-100">
<div class="row align-items-center d-flex h-100">
<div class="col col-lg-3">
1 of 2
</div>
<div class="col col-lg-6">
2 of 2
</div>
<div class="col col-lg-3">
Extra
</div>
</div>
</div>
<div class="container h-100">
<div class="row align-items-center text-center">
<div class="col col-4 mx-auto">
1 of 2
</div>
<div class="col col-4 mx-auto">
2 of 2
</div>
<div class="col col-4 mx-auto">
Extra
</div>
</div>
</div>
I used the mx-auto class on your divs, I've also added the text-center class to center the text for effect.
See pen - https://codepen.io/buzztnt/pen/MWKVZpB
You can write code like this
<div class="container">
<div class="row text-center">
<div class="col-sm-4">1 of 2</div>
<div class="col-sm-4">2 of 2</div>
<div class="col-sm-4">Extra</div>
</div>
</div>
I'm building a responsive front with Bootstrap 4 and I can't do what I want.
I made the result I want on codepen but I'm trying to avoid duplicate code for desktop+mobile.
<p>On desktop</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-3">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-9">
<div class="row">
<div class="col col-md-8 ">
<div class="content-a">ContentA</div>
</div>
<div class="col col-md-4">
<div class="button">Button</div>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
</div>
</div>
</div>
</div>
<p>On mobile</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-6">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-6">
<div class="content-a">Contant A</div>
</div>
<div class="col col-md-12">
<div class="content-b">Contant B</div>
</div>
<div class="col col-md-12">
<div class="button">Button</div>
</div>
</div>
</div>
https://codepen.io/sanchou/pen/YzyXaQW
Is this possible to make? How could I achieve that?
You could consider implementing your layout using flexbox:
Bootstrap Flex
You can change the order of 'Content B' and 'Button' using order class.
Keep in mind that some older browsers might not support it though.
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>