I am getting up to speed with Bootstrap's grid system but the following example confuses me. In the following there are two (2) column classes - col-xs-5 and col-lg-1 - for each div with class form-group
<div class="container-fluid">
<form role="form">
<div class="row">
<div class="form-group col-xs-5 col-lg-1">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5 col-lg-1 ">
<label>
Email
</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
</form>
</div>
Can someone explain why this is done?
Each column class describes how many columns the element will take up at that designated breakpoint. For example:
<div class="form-group col-xs-5 col-lg-1 ">...</div>
This element will take up 5 columns if the page is being rendered at the xs breakpoint (screen width of <768px) but will only take up one column at the lg breakpoint ( >1200px )
This lets you set the presentation of the same element at different screen widths.
For each row you have one column.
It's set to five columns wide for extra small to medium screen sizes with by "col-xs-5" and one column for large screen sizes with "col-lg-1". By default with bootstrap you can set four different layouts (extra small, small, medium and large) to suit different screen sizes.
If you make your browser window size smaller you will see how it effects it.
See http://getbootstrap.com/css/#grid for information on how the grid system works.
It's well worth reading though the documentation as it's very good. See http://getbootstrap.com/css/
Related
I am trying to change the order of the way my columns are displayed on large, medium and and small screen, its responding well but when it reaches small and below it behaves differently?
<div class="row ben-join-margin-util-top" style="margin-top:-1rem;">
<div class="col-lg-6 order-xs-last order-lg-first join-ben-util">
</div>
<div class="col-lg-6 why-benefits-util">
</div>
</div>
For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below).
When implementing the same input with a matSuffix for a trailing icon, the extra margin is no longer there.
Any idea how to get rid of it?
Below an example of the used code:
<mat-form-field fxFlex appearance="outline">
<mat-label>Quota</mat-label>
<mat-icon matPrefix>pin</mat-icon>
<input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>
You can try wrapping your code with a div.row and a div.col-2 as shown below.
<div class="row">
<div class="col-2">
enter your code here
</div>
</div>
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I have this code:
<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>
What I want for small (sm) screens is to have two divs that have three columns each, and an offset of 6 columns for the first div.
For medium (md) screens, I would like to have two divs with twelve columns each (one horizontally stacked under the other), with no offsets.
Somehow the browser doesn't recognize the class col-md-offset-0. It still uses the col-sm-offset-6 class. Any ideas why?
Which version of bootstrap are you using? The early versions of Bootstrap 3 (3.0, 3.0.1) didn't work with this functionality.
col-md-offset-0 should be working as seen in this bootstrap example found here (http://getbootstrap.com/css/#grid-responsive-resets):
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
There is no col-??-offset-0. All "rows" assume there is no offset unless it has been specified. I think you are wanting 3 rows on a small screen and 1 row on a medium screen.
To get the result I believe you are looking for try this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>
Keep in mind you will only see a difference on a small tablet with what you described. Medium, large, and extra small screens the columns are spanning 12.
Hope this helps.
If I get you right, you want something that seems to be the opposite of what is desired normally: you want a horizontal layout for small screens and vertically stacked elements on large screens. You may achieve this in a way like this:
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>
On small screens, i.e. xs and sm, this generates one row with two columns with an offset of 6. On larger screens, i.e. md and lg, it generates two vertically stacked elements in full width (12 columns).
I'm recently started to work with bootstrap and i really like it, very easy and strcutured.
Although i dont understand one thing, what is the correct structure?
I've read their getting started and they said for example the the first child of row can be column ...
But they also mentioned about div='container', should then also all of the elements be in a container?
for example
<div class="container">
<nav> </navr>
</div>
<div class="container">
<div ....> BODY </div>
</div>
<div class='container">
<footer></footer>
</div>
Or are all of this containers very optional and can be left not used?
Same question about rows, should then all column elements be a part of row or not?
I have following structure:
<nav></nav>
<row>
<div class="col-md-2> </div>
<div class="col-md-10">
<row>
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</row>
</div>
</row>
Is this the correct structure?
Since row has negative margins, it should be placed inside container..
According to the Bootstrap docs (http://getbootstrap.com/css/#grid):
"Rows must be placed within a .container for proper alignment and padding."
As you'll see in this demo, the non-contained row causes a horizontal scrollbar:
http://bootply.com/106752
But, container can be used anywhere.. alone, or nested inside other containers / rows.