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>
Related
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>
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 have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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.