Using this markup...
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div style="background-color:gray">1</div>
</div>
<div class="col-md-6">
<div style="background-color:gray">2</div>
</div>
<div class="col-md-3">
<div style="background-color:gray">3</div>
</div>
</div>
</div>
Here's a jsfiddle (run it in full screen):
http://jsfiddle.net/MojoDK/swKyX/
Here's a screenshot:
The spacing between the divs at the red arrows are double of the space of the divs at the orange arrows.
How can I make the div space at the red arrow the same space (10px) as at the orange arrows and still maintain aligned divs/blocks when the three divs wraps as the browser window becomes smaller?
.row > div:not(:first-child):not(:last-child) {
padding: 0;
}
#media screen and (max-width: 768px) {
.row > div:not(:first-child):not(:last-child) {
padding: 0 15px;
}
}
This will work fine in a three columned layout.
A few ways to do this, but here's one:
#media (min-width: 992px){
.container-fluid{
margin-left:15px;
margin-right:15px;
}
}
Here is a fiddle (note you can import the bootstrap CSS for future reference):
http://jsfiddle.net/swKyX/5/
Related
I've got 2 cards that stack in portrait but are next to each other in landscape. I'd like to have the 2 cards vertically aligned to each other in landscape. i.e. The text of the first card should be aligned to the middle of the image. I tried the flex option but that breaks in the responsive design. Little help. Thanks.
<div class="land6">
<header>
<h4>T++++</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="/Thumbs.jpg" width="100%" />
</div>
</div>
The css:
#media only screen and (orientation:landscape){
.land6{width:49%}}
If you do not want to use flex-boxes then you will need another approach:
#media only screen and (orientation:portrait) {
.land6 {
display: block;
width: 100%;
}
}
#media only screen and (orientation:landscape) {
.wrapper {
white-space: nowrap;
}
.land6 {
display: inline-block;
vertical-align: middle;
width: 50%;
}
}
.land6 img {
width: 100%;
}
<div class=wrapper>
<div class="land6">
<header>
<h4>Some header</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />
</div>
</div>
<div>
If your style didn't change when you move from portrait to landscape so you don't need to put the media query here.
To make each card stack on each other, make it take full width of their parents by example: width:100% so it won't let the other cards stay next.
To make the text in the middle of the image, if you already stack it on each other, simply use text-align:center will solve the problem
can somebody please explain me why there is this small yellow padding below the image? I know that the yellow space on the right of the image is normal but why below? Any idea how to fix this?
Thank you!
http://jsfiddle.net/uu0dggmr/
HTML:
<body>
<div id="page">
<div class="box">
<div class="info" style="background:yellow">
<img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
</div>
<div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>
CSS:
body{margin:0;font-size:100%}
#page{margin: 0 auto}
footer{background:black;color:white}
.box {background:white}
.info {background:orange}
#media screen and (min-width:480px) {
.box {width:100%;float:left}
.info {width:50%;float:left}
}
The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:
set float: left on the image
set display: block on the image
set line-height: 0 on the .info div
It's a whitespace, like a line break. You could set another css tag for it. when the holder has an image to set the line-height to zero.
<body>
<div id="page">
<div class="box">
<div class="info image-holder" style="background:yellow">
<img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
</div>
<div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>
CSS
body{margin:0;font-size:100%}
#page{margin: 0 auto}
footer{background:black;color:white}
.box {background:white}
.info {background:orange}
.info.image-holder {
line-height: 0;
}
#media screen and (min-width:480px) {
.box {width:100%;float:left}
.info {width:50%;float:left}
}
I am having lots of problems on positioning three column inside a .row using .span Can you please take a look at THIS LINK and let me know what I am doing wrong! on here?
if you check the page in iPhone 5 landscape orientation you will see that all there spans will line up under each other but I would like to keep two first at the first line. Here is what happening:
and this is what I would like to have:
also in big screens the third span is not fitting at the right end part:
or in iPhone 5 portrait view I woud like to center the image but it looks like:
Thanks for your time
Bootstrap makes all spanX elements display as block in small screens, so you can try adding a new class to make your spans float on small screens too, also I suggest you use the .row-fluid class and float your .social-wrap to make it align to the right
HTML
<div class="row-fluid">
<div class="span2 floatSmall">
<img />
</div>
<div class="span4 floatSmall">
<!--YOUR .span4 CONTENT-->
</div>
<div class="span6">
<div class="footer-body">
<div class="social-wrap">
<ul id="social-networking">
<!--YOUR SOCIAL LINKS-->
</ul>
</div>
</div>
</div>
</div>
CSS
.social-wrap {
float: right;
/*remove the width you have set*/
}
#media (max-width: 767px){
.floatSmall {
width: auto!important;
float: left!important;
}
}
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6"> Some content </div>
</div>
I want to put a vertical line down the middle of the gutter between these two columns.
The line is not the full length of the columns - so I can't just use a border.
I've tried changing my layout to span6, span1, span5 and using the span1 column for the line, but it messes up the space for my right content.
Any ideas ?
If you can go with the assumption that a modern browser (one that supports CSS 3) is being used, you can use the box-sizing property (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) to override the default Bootstrap .span6.
You may also want to enclose this in a #media query to avoid strange left-side spacing when the browser is resized to a smaller width..
#media (min-width:979px) {
.span6:not(:first-child) {
border-left: 1px solid #ddd;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
Bootply
Thanks for the answers. But the problem was not just a border. The vertical line has to be for only part of the length of the columns.
My solution was to use absolute positioning for the vertical line div & I had to give the span column a position:
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6" style="position:relative">
<div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
Some content
</div>
</div>
The only remaining issue is that the -15px left assumes a gutter width (twitter bootstrap puts a left margin on the second span to get the gutter) of a certain dimension & with response twitter bootstrap this can change depending on screen resolution. -15px is safe but won't be quite centered on smaller devices.
In Bootstrap 4.5.3 you could use this html code:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
With this CSS:
#media (min-width: 768px){
.container .row .col-md-3:not(:first-child){
border-left: 1px solid #ccc;
}
}
I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
With bootstrap 2.0.2 and up you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
To reclaim that space and re-span the span8, add this to your css:
#media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
If you happen to be using less you can use bootstrap's grid mixins:
.span12-tablet {
#media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
Using a media query with whatever min/max width set .span4 to display: none;
Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
#media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
#media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
If using bootstrap 2.2.1 you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
#media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (#fluidGridColumnWidth * 6) + (#fluidGridGutterWidth * (6 - 1)) - (.5 / #gridRowWidth * 100 * 1%);
float: left;
margin-left: #fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Write Like this
in phone device this div will hide<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
Update
Previous Answer for Bootstrap 2.3
Now bootstrap 3 come in market..
so i update my answer for new user → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
TLDR: Use the 2nd code snippet
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Starting from the smallest breakpoint (xs - extra small), the span4 is hidden and the span8 takes all of the width (all 12 columns)
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4 take a third of the width (12 columns/3 = 4 columns) and the span8 will take the rest of the width (12-4= 8 columns)
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
Further reading:
If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4 on breakpoints medium and up (>992px)
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
I came up with a small variation of that.
Add stack-tablet class to a row-fluid to make the spans stack on tablet width, not only on phone width (bootstrap default):
#media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
just:
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>