I've recently encountered a problem in where I am trying to achieve:
0.5 col | 11 col | 0.5 col
I've looked at similar questions and found two methods that are mentioned:
Nesting:
<div class="col-xs-1">
<div class="col-xs-6">0.5 col</div>
<!-- 11 col here from 'master' !-->
</div>
<div class="col-xs-11">
test
</div>
<div class="col-xs-1">
<div class="col-xs-6">0.5 col</div>
</div>
As you may see, I'm unsure on how to achieve the 11 col of the page after the 0.5 col in nesting them.
Bootstrap sass files:
.col-xs-half {
#extend .col-xs-1;
width: percentage((0.5 / $grid-columns));
}
However, this does not work and when set thinks col-xs-11 is the starting position.
Any help would be much appreciated.
you can build a custom version of bootstrap here
https://getbootstrap.com/docs/3.3/customize/#grid-system
change 12 column to 24 column
and you can put the code below in your html
<div class="col-md-1"></div>
<div class="col-md-22"></div>
<div class="col-md-1"></div>
Related
I’m having an issue with the bootstrap grid. I’m trying to create (3) four column divs on medium screens, on small screens I’m trying to create six column divs that are offset 3 columns so they are centered. and on extra small screens twelve columns. Seems like something I’ve done a million times… but on medium or larger they are stacking using the .sm class… not sure what’s happening?
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
</div><!-- close row -->
here is a codepen: https://codepen.io/aaron4osu/pen/Powpezo
Your post is a bit confusing, but I'll try to help.
Your first issue is using .col-offset- improperly which is preventing your columns from operating correctly (read more about offsetting here: https://getbootstrap.com/docs/3.4/css/#grid-offsetting)
Your second issue is using .col-sm-6 three times.
With the Bootstrap grid system, your column classes must always equal 12 (because it's a 12 column grid). Having .col-sm-6 three times equals 18 (not 12) so Bootstrap will push your 3rd .col-sm-6 column underneath the others.
Also, always wrap a .container or .container-fluid around your .row or you're going to run into problems later like horizontal scrolling.
And finally, to center your divs on sm and xs, just use .col-xs-12 and then your divs will be centered (and 100% width) until they reach the .col-md- breakpoint, and then they will be .col-md-4 (3 columns, because 4 goes into 12 three times):
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">Column 1</div>
<div class="col-xs-12 col-md-4">Column 2</div>
<div class="col-xs-12 col-md-4">Column 3</div>
</div>
</div>
I have a very simple HTML page that in summary includes the Fabric UI CSS file and has a body (body.ms-Fabric) with
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
Column 1
</div>
<div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
Column 2
</div>
</div>
</div>
but is displaying two rows instead of the expected two columns
What am I doing wrong?
Am I missing any other CSS include or class?
Thanks
It does work. :)
They seem to have forgotten to update their guide when they included rtl support. Simply add dir="ltr" to the html tag or at least the div parent to .ms-Grid-col
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
</div>
</div>
</div>
I have the same issue here, I dont know why we are missing float left:
.ms-Grid-col{
position:relative;
min-height:1px;
padding-left:8px;
padding-right:8px;
box-sizing:border-box}
[dir=ltr] .ms-Grid-col{float:left}
[dir=rtl] .ms-Grid-col{float:right}
if you add float:left; to .ms-grid-col class then it will be ok
What I am trying to achieve is this:
1 long left column- and next to it, 2 rows on the right, that together - align up to the left column.
In a table it would super easy to do:
----------------------------
| | |
| col-4 | col-8 |
| | |
| |________________|
| | |
| | |
| | col-8 |
| | |
----------------------------
My code looks like this, but its only half way there: I cant get the second row col-8 to move up to its twin (other than some kind of custom made double row with a negative margin-top).
<div class="row d-flex flex-row-reverse">
<div class="col-sm-8 align-self-start">888</div>
<div class="col-sm-4" style="height: 400px;">444</div>
<div class="col-sm-8 ">888</div>
</div>
JSFIDDLE
Thank you.
If you are using the normal markup tree of container, row, col you can just put your tall col-sm-4 first followed by a col-sm-8 and add the class of d-flex flex-column to the col-sm-8 and then inside of the col-sm-8 you can have 2 divs with the class of col and they will fill the area of their parent so your markup would look like the following:
<div class="container">
<div class="row">
<div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
<div class="col-sm-8 d-flex flex-column p-0">
<div class="col">Flex item inside col-sm-8</div>
<div class="col">Flex item inside col-sm-8</div>
</div>
</div>
</div>
If your not using bootstraps markup tree then you will have to initiate the flex behavior on the outside div like so:
<div class="d-flex">
<div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
<div class="col-sm-8 d-flex flex-column p-0">
<div class="col">Flex item inside col-sm-8</div>
<div class="col">Flex item inside col-sm-8</div>
</div>
</div>
So how this works is bootstrap's rows use the flex behavior already to create their grid so they already have the display:flex in the row's css and by adding the .col class inside of your d-flex flex-column you are initiating the flex behavior on your .col-sm-8 and the .col class has flex-grow: 1;` in the css already so your child containers of your flex column will fill the height.
Hope that makes sense here is an updated fiddle Fiddle Demo
Note: You will probably want to add the class of p-0 to the flex-column to eliminate the columns padding like I have done in the above examples
What kind of browser support do you need for this? One possible attack would be using CSS Grid. Grid is relatively well supported, and getting better all the time.
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).
So this totally works (goes from 4 columns to 2 on small screens):
<div class="row">
<div class="col-lg-3 col-sm-6"> 1</div>
<div class="col-lg-3 col-sm-6"> 2</div>
<div class="col-lg-3 col-sm-6"> 3</div>
<div class="col-lg-3 col-sm-6"> 4</div>
</div>
As does my 3-column, however the middle column gets stacked on top of the third one (which by then is the right/2nd column).
<div class="row" id="footer">
<div class="col-lg-3 col-sm-6">
1
</div>
<div class="col-lg-3 col-sm-6">
2
</div>
<div class="col-lg-6 col-sm-6">
3
</div>
</div>
How can I tell the middle column to stack above or underneath the first column? col-sm-pull-6 doesn't work for example.
Desired result:
1 - 3
2 - ..
The problem with switching 2 and 3 and then using push and pull, is that the 2nd column still goes a top of the 3rd column. And I need them to be like in my desired result 'diagram'.
Edit: What I can do is give the first column col-sm-12. This will push the other 2 down. That way the order is good, and since it's for a footer, the fact that the paragraph column is at the complete bottom, isn't bad either. But I'm still open for better suggestions.
The grid now looks like this:
1
2 - 3
Be sure to watch out for divs that have different heights. Those will cause things to not wrap all the way to the left like you might expect.
You can address this using the bootstrap clearfix (even conditionally) with something like:
<div class="clearfix visible-sm"></div>
Put that after a div where you'd want to start a new row at the -sm size. Repeat as needed.
So here goes,
first of all you should use the designs for smaller screens BEFORE larger screens like so:
<div class="col-sm-6 col-lg-3"> (...)
Now for your design to happen you need to to this:
<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>
...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.
edit: here is a working fiddle:
http://jsfiddle.net/ujrwyrbr/2/