I have div in container that I want to be col--8 with offset-2 on medium, large, and extra large screens - this would put it in center of page and smaller with wide, however at same time when screen is small or extra small I want to offset to be removed and col--12 div being of full with
I tried with:
<div class="col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2" >
Some content here...
</div>
What I doing wrong ?
Ps. I also using angular on page...
Remove col-xs-offset-0. it is not necessary.
here is a forked jsFiddle
The classes that you have there should do the job so long as you have properly wrapped the div in parent .container and .row div elements. Including those wrappers would look like the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2" >
Some content here...
</div>
</div>
</div>
In Bootstrap 4 the syntax is a little bit change
col-lg-10 offset-lg-2
Related
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?
Figure A on size col-md or larger
And when screen is col-sm or col-xs, go to B or C. (2 different solutions).
I'm looking for the correct div layouts for A->B and A->C.
The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.
The following DOES NOT work...
Fiddle ... https://jsfiddle.net/s4jj30wf/
<div class="row">
<div style="background:blue" class="col-xs-12 col-md-4">
<div style="height:100px"></div>
</div>
<div style="background:yellow" class="col-md-8 col-xs-12">
<div class="row">
<div style="background:green" class="col-md-12 col-xs-12">
<div style="height:20px"></div>
</div>
<div style="background:pink" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
<div style="background:red" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
</div>
</div>
<div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
<div style="height:50px"></div>
</div>
</div>
Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.
Sample pure css with fixed height of columns:
http://codepen.io/Nasir_T/pen/ZBOgoe
If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.
Sample jQuery & css solution with dynamic column height:
http://codepen.io/Nasir_T/pen/VmjoPd
Hope this helps.
I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-
In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.
Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc.
But duplicating content is usually not wise idea.
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I'm trying to create a layout in Bootstrap that shows three blocks on a larger screen and two blocks on a smaller screen (the breakpoint occurs between sm and md).
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4">B - 100</div>
<div class="col-xs-6 col-md-4">C - 75</div>
</div>
</div>
See CodePen example
This however results in an unwanted vertical gap between block A and C.
As I see it I have a few possible options to remove the vertical gap, but perhaps there is a better solution:
Duplicate the html and use visible-sm and visible-md to show the wanted layout. On sm it would have a two column layout with the first column containing both A and C.
Disadvantage: The block content also needs to get duplicated, which might contain a lot of html
Use JavaScript to move the block to the correct column (perhaps jQuery Masonry).
Disadvantage: I would rather have a CSS only solution
Take a look at flexbox, css columns and css grid.
Disadvantage: Browser support isn't there
Imperfect untested solution at http://codepen.io/elliz/pen/fvpLl. Key points:
At small widths
break B out of flow
make container smaller
HTML
<div class="container">
<!-- note: sm -> container 50% -->
<div class="row col-xs-6 col-md-12">
<!-- note: sm -> div = 100% of container which is 50% -->
<div class="col-xs-12 col-md-4 h50">A - 50</div>
<div class="col-xs-12 col-md-4 h100">B - 100</div>
<div class="col-xs-12 col-md-4 h75">C - 75</div>
</div>
</div>
CSS Fragment
/* xs and sm */
#media ( max-width: 991px) {
.h100 {
position: absolute !important; /* better to do with specificity, but quick ugly hack */
margin-left:93%;
}
}
Spacing is not perfect, but gives you a starting point for your experiments.
Note: this can be implemented using FlexBox and Grid (when it is ready) far easier - and the latest alpha version of Bootstrap does support flexbox.
I realize you said you'd prefer a css only solution, but in my opinion what you are trying to accomplish is not what the bootstrap devs had in mind when they designed their grid system. I would use javascript to stick that sucker where you need it:
jQuery/html/css solution
I changed your columns to be containers (I called em buckets)
HTML
<div class="row">
<div class="container">
<div id="leftBucket" class="col-xs-6 col-md-4">
<div id="A" class="h50">A - 50</div>
</div>
<div id="middleBucket" class="col-xs-6 col-md-4">
<div id="B" class="h100">B - 100</div>
</div>
<div id="rightBucket" class="hidden-sm col-md-4">
<div id="C" class="h75">C - 75</div>
</div>
</div>
</div>
<div id="hiddenDiv"></div>
Then I "borrowed" an approach to watching for media queries from the link in the comment below
JS
// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){
if ($("#hiddenDiv").css("float") == "none" ){
// small screen!
$('#C').appendTo('#leftBucket');
} else {
//not a small screen :P
$('#C').appendTo('#rightBucket');
}
});
And added some rules for the hidden div (that I use to watch screen width)
CSS
#hiddenDiv {float:left;}
#media only screen and (max-width: 992px){
#hiddenDiv {float:none;}
}
ps. it's good to see people using hand drawn doodles to get their ideas across, that's how I like to break it down for people also :D
I found a clever way of doing this. Rearrange the order. Put C before B and then use push and pull to swap the order
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
<div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
</div>
</div>
I have created a fiddle with a wrapping div added with a fixed width.
For 320 screen size, reduced the wrapper width and also changed float of the B div to float: right
Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
</div>
I understand that you need 12 spans in total. Is there a way to still center align the two spans I have horizontally? The above will just float to the left.
I've tried putting a wrapper around them and margin auto'ng it but nothing happens.
I can go and remove the span class and just add a specified width but I need span class for fluid layout.
If you want to center two columns of span4 you can use offset param like this:
<div class="row">
<div class="span4 offset2"></div>
<div class="span4"></div>
</div>
Remember this may crash in lower resolutions. To prevent that think about using fluid grid layout. This is done by changing
<div class="row">
into
<div class="row-fluid">
Hope that helps!