Here is a challenge for bootstrap wizards: how to have my layout swap between .container and .container-fluid depending on the screen size. I.e. on mobile I want fluid, else use the regular container.
<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
<div class="row">
...
</div>
</div>
Disclaimer: the workaround I'm doing right now is tweaking the margins using media query. I.e. using .container and adding negative margins on mobile. Wondering if there is a better way of achieving this.
Requirements: Ideally I want a purely css-based solution, if really not possible, please consider that I'm using angular 1.x.
PS: I do not want to duplicate whats inside "row", in other words, I'm not interested in doing .visible-xs and .hidden-xs with duplicated content...
Thanks!
The only difference between the container and container-fluid is width so the child elements (rows, cols, etc..) will behave the same in either.
The container becomes full-width (100%) on xs screens by default, so at screen widths less than 768px, the container and container-fluid behave exactly the same. You shouldn't need to make any changes, and you can simply use container.
http://codeply.com/go/8ei2hMKBKd
Related
I've read several of the SO answers to what .container and .container-fluid are, but what I am missing is simple. Do I use column classes like col-xs-6, col-md-9, etc., if I am using .container-fluid? Both resize and .container does it specific sizes, which is why I use the col-x-x classes, but .container-fluid resizes everything all the time, so does .container-fluid take care of the column sizing automatically and I "trust" it gets it right?
The container-fluid is used to contain the grid (row + col-*) but can be used for other things such as headings, tables, etc..
So no, container-fluid is not a replacement for columns, it's a holder of columns. The only difference between container-fluid and container is that the container is not full-width on larger screens. The container is a fixed width that's centered with large margins on the sides. container-fluid doesn't resize, it's always 100% width. Container demo
If you want to use the responsive grid (rows and columns), you need to use container or container-fluid like this..
<div class="container-fluid">
<div class="row">
(one or more col-*-* here)
</div>
</div>
Or
<div class="container">
<div class="row">
(one or more col-*-* here)
</div>
</div>
Read this article for a complete explanation.
Containers exist mostly to 1) limit page width and 2) provide padding for rows. Fluid containers only do the latter. If you aren't using rows, you may not need containers. However, if you're using columns you should be using rows and containers for better, more controllable structure.
Yes, you can because the .container-fluid is used as container but the difference is in responsive sizes.
see: Container-fluid vs .container
In my website, I have a box that's not sizing like I want.
<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.
<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?
And how can I make it work on both?
Have you even read the documentation of Bootstrap?
http://getbootstrap.com/css/#grid
Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
That influences the devices with a resolution of 767 pixels or less.
So to come back to your question: are they combineable? Yes, they are
The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.
Happy HTML'ing!
.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.
HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.
If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block
The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?
I'm trying to accomplish a layout similar to this one:
http://dribbble.com/shots/829195-Slate/attachments/86422
My project uses Twitter Bootstrap with responsive design. It is possible to implement a full width layout with Bootstrap?
The issue is that from what I've been reading fluid layouts will be removed in bootstrap 3.0, and the responsive design has fixed widths.
You'll find a great tutorial here: bootstrap-3-grid-introduction and answer for your question is <div class="container-fluid"> ... </div>
Because the accepted answer isn't on the same planet as BS3, I'll share what I'm using to achieve nearly full-width capabilities.
First off, this is cheating. It's not really fluid width - but it appears to be - depending on the size of the screen viewing the site.
The problem with BS3 and fluid width sites is that they have taken this "mobile first" approach, which requires that they define every freaking screen width up to what they consider to be desktop (1200px) I'm working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width.
They have defined 10 screen widths (really only 5, but anyway). I don't really feel comfortable changing those, because they are common widths. So, I chose to define some extra widths for BS to choose from when deciding the width of the container class.
The way I use BS is to take all of the Bootstrap provided LESS files, omit the variables.less file to provide my own, and add one of my own to the end to override the things I want to change. Within my less file, I add the following to achieve 2 common screen width settings:
#media screen and (min-width: 1600px) {
.container {
max-width: (1600px - #grid-gutter-width);
}
}
#media screen and (min-width: 1900px) {
.container {
max-width: (1900px - #grid-gutter-width);
}
}
These two settings set the example for what you need to do to achieve different screen widths. Here, you get full width at 1600px, and 1900px. Any less than 1600 - BS falls back to the 1200px width, then to 768px and so forth - down to phone size.
If you have larger to support, just create more #media screen statements like these. If you're building the CSS instead, you'll want to determine what gutter width was used and subtract it from your target screen width.
Update:
Bootstrap 3.0.1 and up (so far) - it's as easy as setting #container-large-desktop to 100%
Update:
Bootstrap 3 has been released since this question was originally answered in January, so if you are a BS3 user, please refer to the BS3 documentation. For those still on BS2, the original answer still applies. If you are interested in switching from 2 to 3, see the migration guide.
Original answer:
From the bootstrap 2 docs:
Make any row "fluid" by changing .row to .row-fluid. The column
classes stay the exact same, making it easy to flip between fixed and
fluid grids.
Code
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
This, in conjunction with setting the width of your container to a fluid value, should allow you to get your desired layout.
As of the latest Bootstrap (3.1.x), the way to achieve a fluid layout it to use .container-fluid class.
See Bootstrap grid for reference
Just create another class and add along with the bootstrap container class. You can also use container-fluid though.
<div class="container full-width">
<div class="row">
....
</div>
</div>
The CSS part is pretty simple
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
Hope this helps, Thanks!
*{
margin:0
padding:0
}
make sure your container's width:%100
In Bootstrap 3, columns are specified using percentages. (In Bootstrap 2, this was only the case if a column/span was within a .row-fluid element, but that's no longer necessary and that class no longer exists.) If you use a .container, then #Michael is absolutely right that you'll be stuck with a fixed-width layout. However, you should be in good shape if you just avoid using a .container element.
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
The margin for the body is already 0, so you should be able to get up right to the edge. (Columns still have a 15px padding on both sides, so you may have to account for that in your design, but this shouldn't stop you, and you can always customize this when you download Bootstrap.)
Here is an example of a 100% width, 100% height layout with Bootstrap 3.
http://bootply.com/tofficer/77686
The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this. You get again a container-fluid :
.container{
max-width:100%;
padding:0;
}
I think you could just use class "col-md-12" it has required left and right paddings and 100% width. Looks like this is a good replacement for container-fluid from 2nd bootstrap.
From my reading of the documentation, it seems that .container is the "parent" wrapper for the .row and the divs that contain the .spanX (where the x totals 12). However, it doesn't seem like there is a .row in their navigation example.
Also, on their documentation site, the .container is wrapped by a couple of navbar related divs.
Can anyone elaborate a bit on how the framework should work? I'm new to it.
The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows.
For the .container inside of the .navbar divs, that is a separate thing that is required to make the navbar line up with the rest of the page. If you look further down in the rendered HTML, you'll see that there is another .container that is not inside any .navbar divs, and that is the one with all of the main content.
A Complete Example
<div class="container">
<div class="row">
<!-- These divs are inline and do NOT fill up the full 12 columns -->
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!-- This is a automatically a new line of divs -->
<div class="row">
<!-- This div will appear below the previous row, even though it
would fit next to the other divs -->
<div class="span4"></div>
</div>
<!-- These will appear in their own row, but may act
unexpectedly in certain situations -->
<div class="span4"></div>
<div class="span4"></div>
</div>
In Short
.row defines a row of divs, like the name implies. Each one indicates a new line of divs, no matter if the above line is full or not.
The answer is much simpler than those given. No, .container does not have to contain any specific code, and it has no encumbrances on what contains it...
What .container does is serve as a "wrapper" to "contain" the size of any and all elements wrapped inside of it. And .container can wrap pages or components. So, if you want a page similar to those Twitter Bootstrap's docs, with a "fixed" width and equal margin on both sides, then only a single .container is necessary to wrap all of the content on the page.
There are other uses for .container as well; have you noticed how the top navbar in Bootstrap's docs (.navbar-fixed-top) spans the full width of the screen, but the nav items inside the navbar are "contained" to the width of the content? This is because the .navbar-fixed-top is not inside a .container but the .nav inside it is.
The bootstrap grid is composed of 12 columns that can be adjusted in any combination within a row as long as they add up to 12. You can think of them as containment rows such as the likes of table rows, which are meant to separate different rows of content. Within the grid, the .row container has a separate task and is there (and required) to readjust the last grid columns gutter width, which varies depending on screen size (if the responsive sheet is included). If you look at the css behind the .row class you will notice that it has a property of margin-left:-30px by default (once again it can be greater or less depending on screen size), a property which is meant to "remove" the gutter from the last column in the row; without it the grid would not readjust the gutter and it would break onto a second line.
Now, the reason why the .row container is a child of the .container container is because the .row container is only meant to separate "lines" of content, not to contain sections and more over center content in a page. As such, the reason why the navigation example did not have one was probably due to the fact that the nav elements is lacking in gutter width, since it was meant to be a full block element and not a grid, so there was no need to reset that last loose gutter.