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.
Related
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
I am beginner in twitter bootstrap My question is simple can i use my custom CSS in bootstrap also, is it a correct way or i have to use only bootstrap classes Like i am facing margin padding issues
For Example
i used the .container-fluid class now i want to use .wrap class of mine
.wrap{
width:1249px;
margin:0px auto;
}
then i used the .row and .col in it suppose the first col is col-sm-4 how and in .col-sm-4 i use h1 heading it need margin from left
the actual question is, Is it a correct way of using own classes when we need?
is it make any difference? the responsiveness will remain the same? Thanks in advance
Yes you can use your own class also along with bootstrap 3.However it might affect the responsiveness of your page, since you are fixing the width. So, if the page becomes less than 1249px, it will show a horizontal scroll.
In bootstrap 3.0 I can wrap .container class with my class and set the width to my class to 980px
EX
<div class="maincontainer">
<div class="container">
//some content
</div>
</div>
CSS
.maincontainer {
max-width: 980px;
margin:0 auto;
}
That code will wrap my contents with 980px,
but in bootstrap 3.0.2 the author has change class .container to width not max-width in bootstrap 3.0.
So it is hard to set 980px for my layout!!
I'm using LESS css!
Any ideas?
A few of choices
In bootstrap, if one is using responsive design on the grid, then width is set by a variable (currently in 3.0.2 on line 43 of grid.less and following, depending on size).
Choice #1
Change the #container-XX variable(s) controlling the width in the variables.less file to achieve the 980px (for whatever size(s) you want it) which will then make the .container control the width and be what you want. I recommend this only if you actually still want some form of responsive site.
Choice #2
If you want to control the width still by your .maincontainer class, then in the same variable file noted in #1, change all the #container-XX (for sm, md, lg) to be auto which will make elements fit to the wrapping container .maincontainer.
Choice #3
If you do not want a responsive site at all, but a statically set 980px then follow the directions in this SO answer.
My guess is you actually want #3, but I thought I would mention the other ideas as well.
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}
I've got multiple independent boxes on my page all using {float:left}. There's nothing else around for them to interfere with.
When the window is narrow, I'd like the boxes to be {width:100%}. When the window is wide enough for two boxes to fit side by side, I'd like the boxes to be {width:50%}.
How do I go about doing this?
Media queries:
#media screen and (min-width:600px){
div{width:50%; float:left;}
}
Demo
I think the correct way of achieving this is using media queries.
For inspiration (or simply to use), you can check out http://cssgrid.net
The grid system adjusts to the current size of the browser window, and works really well in my opinion. If you want something customized, their CSS is a pretty good example.
Your question is pretty vague, but it sounds like you're asking about Responsive Design
The only substantive answers so far have been using media queries, which I can't figure out how to get working. Here's the solution I've found:
<div class="columns">
<div class="box">
<p>A bunch of stuff in the box.</p>
</div>
</div>
Then attach to that some CSS:
div.columns {
column-width: 300px;
}
div.box {
display: inline-block;
width: 100%;
}
This isn't perfect, but it keeps the content at 100% width, no matter how many boxes fit side by side at any given screen size, and it lets me control how narrow a box is allowed to get (using div.columns' column-width).