i am trying to set up three columns but they are laid out directly beside each other, no gutters.
seemingly, i can also put an endless amount of columns across the row and the "4" specification will not stop at 3 columns.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>Test<br>Test description</p>
</div>
<div class="col-xs-4">
<p>Test<br>Test description</p>
</div>
</div>
</div>
In head, try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
That is cdn to bootstrap version 3
Grid in bootstrap is 12. if you need for 4 row. you can add .row again in another div you can see documentation here
Related
I have the below HTML and CSS. If one of the columns is hidden, I want to expand the other 3 columns. I don't think I can use col-md-3 for this scenario.
How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3" *ngIf="hideCol1">
Column 1
</div>
<div class="col-md-3" *ngIf="hideCol2">
Column 2
</div>
<div class="col-md-3" *ngIf="hideCol3">
Column 3
</div>
<div class="col-md-3" *ngIf="hideCol4">
Column 4
</div>
</div>
You can use col-md (or just col) class to adjust columns automatically.
Thanks to flexbox, grid columns without a specified width will
automatically layout as equal width columns. For example, four
instances of .col-sm will each automatically be 25% wide from the
small breakpoint and up. See the auto-layout columns section for more
examples.
https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md" *ngIf="hideCol1">
Column 1
</div>
<div class="col-md" *ngIf="hideCol2">
Column 2
</div>
<div class="col-md" *ngIf="hideCol3">
Column 3
</div>
<div class="col-md" *ngIf="hideCol4">
Column 4
</div>
</div>
If you mean that when hiding a column via *ngIf you want the remaining columns to responsively resize themselves, you can just set each column's class to "col", instead of specifying the col size.
Using Bootstrap 3.3.7, I have this markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
Col 1 Main text goes here
</div>
<div class="col-md-3">
Col 2 List of links to other pages here
</div>
<div class="col-md-3">
Col 3 Sidebar text
</div>
</div>
</div>
As I reduce browser window size, I would expect Cols 2 and 3 to wrap below Col 1 but display alongside each other initially.
Instead, all three columns are stacked vertically after first break. How do I alter this behavior?
With bootstrap the -md- denotes "medium". So as that is the only size you've set, bootstrap defaults will be used for when it's small. You can add different column numbers specifically for when the screen gets smaller using "col-sm" alongside the "col-md" like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
Col 1 Main text goes here
</div>
<div class="col-md-3 col-sm-3">
Col 2 List of links to other pages here
</div>
<div class="col-md-3 col-sm-3">
Col 3 Sidebar text
</div>
</div>
</div>
You can also hard-code columns by removing the "-md" section.
You can see an example at this codepen:
https://codepen.io/jay-searra/pen/MzJvZg
Im fairly new to bootstrap and the concept of responsive design.
I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions col- must = 12 in a single row class. They also mention you can combine different col classes and sizes example <div class="col-md-3 col-xs-6">
What I am not getting is when should you break the viewport with the </row> class when you combine different col sizes ?
Consider the following, where I want a mobile device to display 2 rows and 2 columns and on desktop a single column with 4 rows
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
Considering all columns inside rows must = 12, the row class would need to be closed on different points for mobile and desktop...?
How would I tackle the above problem, hope the question makes sense.
Thank you
Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".
It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...
From the Bootstrap docs:
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"
That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.
There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.
Similar Questions..
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - row can I have columns add up to more then 12?
Just change the "col-md-3" class to "col-md-12" in all divs to show 4 rows and single column on desktop and two rows and two columns on mobile.
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows
It's just proper nesting..the problem that you have mentioned in your question can be solved in the following way--
As you can see a mobile device will display 2 rows and 2 columns and on desktop a single column will have 4 rows--
Although it can be achieved using many other div nesting methods, I have shown only one such configuration to achieve your desired layout.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.btn-xs {
display: inline-block;
margin-right: 2%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
AAAAAAA
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
BBBBBBBBBB
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
CCCCCCCCCCC
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
DDDDDDDDDDD
</div>
</div><!--/row -->
</div><!--/container -->
</div>
</body>
</html>
I don't know if I'm wrong but it used to be that if you had bootstrap-columns that added to more than 12 (default value) the rest would drop to a new "row". I'm now using Bootstrap 3.x So in theory having this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
Would be essentially the same as having this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
<div class="row"> <!-- This would seem to 'drop' into a new row -->
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
I'm using AngularJS v1.3.x to create multiple columns of 4 expecting them to be align in different rows:
<div class="row">
<div class="col-xs-4" ng-repeat="item in ['Lorem Ipsum..', 1, 2, 3...]">{{item}}</div>
</div>
but as the height of each column differs (i.e. 'Lorem Ipsum..' and single numbers). You can see what happens in this plunker. Instead of having the next 12 drop to a new row, they "overlap" somehow, making it look good UNTIL there is a gap. What I want is to actually drop to a new row every 12.
Is this happening for any specific reason? And how can I use Angular in a way to add a row every total of 12 (3 x col-xs-4 = 12). As extra information: the array is dynamic, it will never hold the same amount of items at one time, meaning that I can't hard code it.
Any ideas are greatly appreciated, thanks!
Responsive column resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
Basically, it comes down to how floats work in CSS/HTML, in particular when the items being floated are of differing heights. And Bootstrap's grid is implemented using floats, so this floating issue affects it.
Example for your particular case:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="clearfix"></div>
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.