I have my simple markup
<div class="row">
<div class="col-lg-6 loginField">
data
</div>
<div class=" col-lg-6 loginField">
<div class="">
test
</div>
</div>
</div>
.loginField{
background-color:white;
}
so my problem is that i am getting 1 white line on desktop screen, but i want to make a 10 px space between those 2 columns without destroying responsive design. Right now if i switch to smaller screen it works, but on desctop there are no space, and if i add margin, this margin presist on smaller screens which is ugly.
P.S. when i say it works on smaller screens, i mean that those 2 columns move under each other and width of the white lines are as they shopuld be.
You simply need to mimic the same breakpoints in the responsive design as is in bootstrap.css:
http://jsfiddle.net/G6nWh/4/
CSS:
#media (min-width: 1200px) {
.margin-left-10 { margin-left: 10px; }
}
HTML:
<div class="col-lg-6 loginField">
<div class="margin-left-10">
test
</div>
</div>
If you have changed the breakpoints, you'll need to update that min-width, but this is the default min-width for Bootstrap's large columns.
When the screen gets smaller, the rule stops being applied, so it won't affect your smaller screens.
Related
I am expecting the divs to be aligned horizontally,, but they are stacked one below the other. Why is this happening.
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>5000</h3></div>
<div class="col-md-4">
<h3>5000</h3></div>
<div class="col-md-4">
<h3>5000</h3></div>
</div>
</div>
</footer>
https://jsfiddle.net/hycdvmhn/1/
What is your screen resolution?
It is working in screens with 992px or wider..
Maybe you could use col-sm-4 (768px or wider) or even col-xs-4 (no min-width) based on your needs..
There's nothing wrong with your code.
You are likely viewing it in a screen not wider than 992px which is the breakpoint for the -md- size.
I can see your fiddle fine on my 1920px wide screen. See below. If you drag the vertical bar in the middle and make it smaller, then it will stack over one another when you get to less than 992px.
Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!
I have a layout as follows:
<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>
I would like the span9 div and the span3 div to both become span12 divs when the user is viewing the page on a tablet or mobile device, and I would like them to become vertically stacked above on another.
Can this be accomplished and if so how? My current solution relies upon a second set of divs which I show on small browser windows and I hide the above divs.
Using Bootstrap 3, this is super easy:
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
At typical desktop resolution (> 992px), the divs will be 9/12 columns & 3/12 columns. On anything smaller, they will be 12/12.
Twitter Bootstrap 3 grids
Using Bootstrap 2.3.2, you can add a media query:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.span9, .span3 {
display: block;
float: none;
width: 100%;
}
}
I'm using a responsive fluid grid system on my site, and in most cases the responsive Bootstrap behaviour is what I want: on small screens, the grid columns become fluid and stack vertically.
However, using grid nesting, inside a nested row this is not always the desired behaviour. There are some rows that are not supposed to be stacked vertically, regardless how small the screen is. This is exactly the behaviour of the whole grid when I completely disable all responsive CSS code, but obviously this is no alternative if the responsive behaviour is required for the outer rows.
The relevant markup is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">This column should be stacked on small devices.</div>
<div class="span6">
<div class="row-fluid">
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
</div>
</div>
</div>
See this jsfidde for clarification.
How would one best solve this problem? Is there a way to do it with the native bootstrap functions?
[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}
example:
http://jsfiddle.net/NfTQ7/1/
What I have done to solve issues like this is the following:
<div class="row-fluid">
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
#media only screen and (max-width: 480px) {
#remove-mobile {
display:none;
}
}
That way, you get rid of that whole mess on smaller devices, and you can add code specifically targeted towards mobile sizes by simply doing the opposite:
<div class="row-fluid">
<div id="show-mobile" class="span6">Your Beautiful Code For Mobile Only</div>
</div>
#media only screen and (min-width: 481px) {
#show-mobile {
display:none;
}
}
#media only screen and (max-width: 480px) {
#show-mobile {
display:block;
}
#remove-mobile {
display:none;
}
}
It's not the simplest of solutions but I've found it suits my needs
https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L572
If you dive into the source for bootstraps grid, it's relatively easy to pull out the less code used to generate the span[1-12] system.
So I just pulled out the basics and put them in my own file with a different selector. So now, when I want to use span's that don't wrap I just use .naps[1-12] (Span spelt backwards).
The responsive CSS looks for .span[1-12] selectors so it ignores my .naps elements.
It's not elegant, and it's not particularly scalable. It does work though :-/
For an example on Bootstrap website
Ctrl +F "Nesting Columns". With a wide enough window both of the Level 2 columns are next to each other, but reducing the size so they don't fit anymore they nicely snug under each other. How can I do this?
I have an almost identical layout, except I have several divs stacked and 1 sidebar floated to the right. Something like this:
<div id="container"> //Width: 96%; margin: auto; max-width: 870px;
<div id="sidebar">Sidebar</div> //Floated to the right and "width: 26%;"
<div id="box1">Box 1</div> //Width: 68%; for every box# id
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
I can squeeze it together as I please and everything works, but as the width of the window gets reduced I want the sidebar to stack on top of the box divs like in the bootstrap example. If I reduce the width of the window the sidebar goes on top of the divs, but it is still floated to the right and just looks broken.
What you want is probably media queries.
http://www.w3.org/TR/css3-mediaqueries/
E.G.
#media screen and (max-width: 768px) {
// insert css rules here
}
With the above CSS code you would place the CSS rules you want to come into play for devices with a resolution of 768px or below.