So I've got a 2 column layout in Bootstrap 5 and each column needs to remain at 50% width e.g.
<div class="container-fluid">
<div class="row">
<div class="col">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
If I wanted the content of the first col to be perfectly flush to the left and right hand edge of the column (no padding etc), but still keep the second column with the default padding, it would seem that if I simply did this:
<div class="container-fluid">
<div class="row">
<div class="col p-0">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
It makes column 1 slightly less wide and column 2 wider. Thus column 2 is out of alignment as both columns are no longer 50% in width.
To keep both columns the same width but have no padding on column 1, the only solution I can come up with is to then adjust the flex property on all columns within .container-fluid to increase the flex-basis value to an arbitrary amount below 50% e.g.
.container-fluid .col { flex: 1 0 20%; }
This then has the desired effect and keeps both columns in alignment. But it feels a bit hacky.
I wonder if I've missed something?
Are you using the latest bootstrap? It seems to work fine here. Both column contents are exactly the same width.
<html lang="en">
<head>
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
crossorigin="anonymous"
></script>
</html>
Related
How do I get a gap between the two columns?
This question has been asked here a lot of times, but all aswers I found did not work. For example: Bootstrap: add margin/padding space between columns
Bootstrap 5 documentation says to use gx-? to manipulate the gutter. However, it does not change the gap between both columns. Adding a margin like in the link seams to move the second column into another row.
Here is a running example:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row gx-5">
<div class="p-3 col-9 border border-3 border-primary">
<div class="border">Field1</div>
</div>
<div class="p-3 col-3 border border-3 border-primary">
<div class="border">Field2</div>
</div>
</div>
</body>
</html>
I'm pretty new to coding and I know very little, so I apologize if the answer to this question is very simple, but I scoured the internet for hours and came up with nothing. So, I have a very basic column set up, ie, something along the lines of:
<div class="row">
<div class="col-6 col-sm-3">CONTENT
<div class="row">
<div class="col-6 col-sm-3">CONTENT</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
Where I have a row of two primary columns and two additional columns in the leftmost of the two primary columns. The height of the rightmost primary column is dependent upon the height of the content in the leftmost primary column and scales in size with said column, which I believe that is how it usually works. But for the secondary columns inside the primary leftmost column, I need the height of the leftmost secondary column to scale with the height of the content in the rightmost secondary column. In visual terms: Example.
I know I could simply set a height for the content of that column, but the issue is that the content on the page is fluid, so on different size screens, it doesn't always match up. Is there a way to do this? Thanks!
Looks like your layout is reverse. Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want two equal-width columns across, you can use .col-6. You can use this code:
<div class="row">
<div class="col-md-6 col-12">CONTENT
<div class="row">
<div class="col-md-6 col-12">CONTENT</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
If you want two equal-width columns across. You can use this code
.bg-p{
background:#b8b8b8;
width:100%;
padding:1rem;
}
.bg-c{
background:#939393;
width:100%;
padding:1rem;
min-height:150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="bg-p">P1
<div class="row">
<div class="col-sm-6">
<div class="bg-c">S1</div>
</div>
<div class="col-sm-6">
<div class="bg-c">S2</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 d-flex">
<div class="bg-p">P2
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
I am working with row class in bootstrap. The row has two columns. One is for x and one is for Y.
There are dynamic situations where there will be either X column or either Y column or both the columns inside the row.
My query is since one row can have 12 columns, so when I have only X column then it will take col-md-12 and when there is X and Y boths the columns then X and Y will take col-md-6 and col-md-6 respectively inside the row.
Example
<div class="row">
<div class="col-md-6">x</div>
<div class="col-md-6">y</div>
</div>
When only one element(X) from database comes then
<div class="row">
<div class="col-md-12">x</div>
</div>
Thank you!
You can try setting just col class to all div it will auto adjust the width. However it will act same across all devices.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col" style="background-color:red;">Div 1</div>
</div>
<div class="row">
<div class="col" style="background-color:yellow;">Div 1</div>
<div class="col" style="background-color:orange;">Div 2</div>
</div>
</div>
I have the following:
<div class="container-fluid">
<div class="row">
<div class="col-lg-1">Description MKT</div>
<div class="col-lg-11">
<!-- ... -->
</div>
</div>
</div>
At 1754 pixel screen width "Description MKT" does not wrap. But at 1697px width there is a line break between "Description" and "MKT". I can make the columns col-lg-2 and col-lg-10 which looks good at the smaller end of the "large" scale resolution, but at 1700+ screen pixel width the first column is far too wide.
Is there an easy way to lay out columns in bootstrap so you don't get too much whitespace? Ideally I need a max-width on columns without breaking bootstrap.
Use col-auto on the first one, and col on the second.
This should make the first column only take the needed width, and the second take the rest of the row.
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-auto bg-danger">Description MKT</div>
<div class="col bg-success">
Some other content
</div>
</div>
</div>
I am trying make some grid in bootstrap and I do not know whether I'm coming correctly so here is my HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-white">
<div style="background-color: #0a4d85" class="col-md-6">
<div class="col-md-12" style="background-color: #00B312">
<p>text</p>
</div>
</div>
<div style="background-color: #0000BB" class="col-md-6">
<div class="row"> <!-- This row -->
<div class="col-md-12" style="background-color: #0c0c0c">
<p>text</p>
</div>
<div class="col-md-12" style="background-color: #00a1e8">
<p>text</p>
</div>
</div>
</div>
</div>
</div>
Result from this code is like this (no padding for right side):
But if I remove "row" class (selected in HTML comment) result is as i expected:
So how? I am doing something wrong or row in row is bad practise?
Bootstrap grid is based on a 12 column layout. There are three major components containers, rows, and columns. Rows are horizontal groups of columns that ensure your columns are lined up properly. Hence, Row in row is not good practice. Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use .col-md-4.