Here is a example of code that i need advice for:
<div class="container hidden-xs">
<div class="row hidden-xs">
<div class="container hidden-sm hidden-md hidden-lg">
<div class="row xtrastyle hidden-sm hidden-md hidden-lg">
<div class="col-md-12">
Test
</div>
</div>
</div>
</div>
Assume i want one type of container and row for xs devices and one container and row for other devices. It doesnt work like this code. I need tips to use to get it work.
If you want to have the same contents with diffrent styling use css media queries.
HTML:
<div class="container">
<div class="row xtrastyle">
<div class="col-md-12">
Test
</div>
</div>
</div>
CSS:
#media (max-width: 768px) {
.xtrastyle {
// apply your xtra style here
color: red;
}
}
Hint: If you use LESS instead of CSS you could use bootstrap #screen-sm variable instead of 768px: http://getbootstrap.com/css/#less
Just put both containers on the same level in HTML like so:
HTML
<div class="container hidden-xs">
<div class="row">
Hidden XS
</div>
</div>
<div class="container visible-xs">
<div class="row">
Visible XS
</div>
</div>
See this working Bootply. Also, as you can see and #ganders pointed out in the comments, its easyly achievable using the .visible-?? and .hidden-??-classes. (And much more readable btw.)
The corresponding bootstrap-classes are explained well in the bootstrap-docs.
Bootstrap doesn't have this built in as that's a fairly niche use case. You'll have to write either some custom mixins (assuming you run into this issue often) or by modifying their behavior at various breakpoints.
Related
Please consider the following layout for a page. There are three columns inside a container.
<div class = "container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
The problem i want to solve is that for mobile screen sizes i want to hide the middle column. For screen sizes greater than mobile i.e tablet, laptops and desktops i want to show the middle column. How can i achieve this. All three columns should be of equal width.
I appreciate any help! Thanks!
Bootstrap includes responsive utility classes to hide or show elements are specific breakpoints. The visible classes are visible-xs-*, visible-sm-*, visible-md-*, and visible-lg-*. The hidden classes are hidden-xs, hidden-sm, hidden-md, and hidden-lg.
If you want to hide an element for small and extra small resolutions, you can do something like <div class="col hidden-xs hidden-sm">
Bootply example
By using css, you can hide anything. See below:
<div class = "container">
<div class="row">
<div class="col">
</div>
<div class="col column-to-hide">
</div>
<div class="col">
</div>
</div>
</div>
<style>
#media screen and (max-width: 500px){
.column-to-hide{
display:none;
}
}
</style>
I am starting out with bootstrap here and I want my page to limit itself to 1170px which is the container class standard, but I want the color to continue across the full width of the page.
The only idea I can think of is:
<div class="container-fluid BGtoExtendWholePage headerBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Header
</div>
</div>
</div>
</div>
<div class="container-fluid BGtoExtendWholePage ContentBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Main Content
</div>
</div>
</div>
</div>
There's big arguments against nesting containers in Bootstrap (cue the person to post a link to the bit of documentation saying not to) but I found this to work.
You nest a container within a container-fluid - note the use of p-0 to remove the padding from the inner container.
<div class="container-fluid bg-red mb-3">
<div class="row">
<div class="container p-0 mt-6 mb-6">
...
</div>
</div>
</div>
If you want a full-width background color that is the same in your whole project then you could simply add a <body> tag at the beginning and end of your code (if it isn't already there) and add the following to your CSS
body {
background-color: color-choise;
}
Fill in the color-choise with the color you want it to be.
How can I place six divs on a web page in two rows and three columns?
I tried the follwoing code with bootstarp but the divs do not appear is a row rather after each other in a column
<div class="row">
<div class="span4" id="chart_1"></div>
<div class="span4" id="chart_2"></div>
<div class="span4" id="chart_3"></div>
</div>
fiddle:
https://jsfiddle.net/r2qepmk0/3/
Edit
When I add col-xs-4 class to my divs my d3 charts stop rendering is there another possible solution to this?
One suggestion first, wrap your layout in a bootstrap container class. By default the row class has -15px left and right margins, while the container class has 15px of left and right padding. They're meant to work in tandem and bring your content flush to the outside of the container.
Secondly, use the col- syntax.
<div class="container">
<div class="row">
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
<div class="col-xs-4" id="chart_3">34</div>
</div>
<div class="row">
<div class="col-xs-4" id="chart_3">34</div>
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
</div>
</div>
https://jsfiddle.net/0vu83eru/1/
Use class="col-xs-4" see fiddle https://jsfiddle.net/r2qepmk0/1/
And what you want about w3fools, but this link explains it well http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
You are using bootstrap 2.* syntax while your fiddle has bootstrap 3.3.5 css included. Change your column syntax to this:
<div class="row">
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
<div class="col-xs-4" id="chart_3">34</div>
</div>
And it should work fine for you. Please refer to the documentation for the current version of Bootstrap.
And your updated JSFiddle
You just need to wrap your <div>s in a <div class="col-xs-4"> and everything should be good.
Currently, the bootstrap classes are interfering with the styles applied by the D3 js, which creates the result seen in your fiddle. You should also remove the class="span4" because, as already mentioned, that is bootstrap version 2.x and you are using 3.x.
You can put six divs in two rows and three columns by doing something like this:
<div class="row">
<div class="span4" id="chart_1"></div>
<div class="span4" id="chart_2"></div>
<div class="span4" id="chart_3"></div>
</div>
<div class="row">
<div class="span4" id="chart_4"></div>
<div class="span4" id="chart_5"></div>
<div class="span4" id="chart_6"></div>
</div>
Remember that you can use the class row-fluid to get more flexibility in your web page
i have 3 col in medium view in bootstrap shown in above image ie.
i want to achieve this type of view in small view is col-sm-*
my code is
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4">
<div class="col-md-12">B</div>
</div>
IN THIS way i can achieve my target in medium view but cant achieve in small view.how can i achieve the both view as well as in medium and small view as shown in image.
I suggest reading bootstrap css doc also this
But try this:
<div class="row">
<div class="all a col-sm-12 col-md-6">A</div>
<div class="all b col-sm-12 col-md-6">B</div>
<div class="clearfix"></div>
<div class="all c col-sm-12 col-md-6">C</div>
</div>
You can remove the <div class="clearfix"></div> if you don't care about the height mismatch
Here's a working jsfiddle
It's a bit of a stretch, but you could try this:-
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12 visible-sm visible-xs">B</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="col-md-12">B</div>
</div>
Frankly, I can't think of any other solution using just HTML and CSS. Although, if scripts were involved, it would be a different case.
First of all, you shouldn't assign columns without rows, so you should have something like:
<div class="row">
<div class="col-md-8 col-xs-12">A</div>
<div class="col-md-4 pull-right col-xs-12">B</div>
<div class="col-md-8 col-xs-12">C</div>
</div>
So you pull right your B Div (therefore not clearing the next div, and spacing it out). And with col-xs-12 you assure that float won't be present in mobile.
Heres a pen
Now, if you want to remain with your code, I guess Shan answer is the best one.
Well, you could have the height of B and work with margins so the positioning go right, but that isn't considered best practices and could cause some bugs.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->