I got a PSD design where the grid looks like this -
Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)
I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.
My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?
I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.
My HTML file contains of a standard fluid grid
<div class="container-fluid>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
</div>
Add the following to your css
.row{padding: 0 120px;}
I'm not sure if i totally understand your question, but you can try the following:
Add a container (Bootstrap container)
Add margin with css: .col-sm-4 {margin:Your margin here;}
It really depends on what other content will be inside the rows? If the columns don't need to go from side to side, why not just use Bootstrap .container? You can still have full width content outside of the container..
http://codeply.com/go/HwIDGQpdbO
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
I am trying to setup a website that consists of two main areas: navigation and content. The navigation portion needs to take up the full height of the left column. The main content will be in the left column. In an attempt to set this up, I'm using the following CSS:
<div class="full-height row">
<div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
<!-- Nav COntent goes here -->
</div>
<div class="eight wide column">
Main Content
</div>
</div>
I've created a fiddle with the full example here. What I'm trying to do in the nav column is three things: show a title, have tabs aligned against the bottom of the screen, and have the tab content take up the remaining space. Unfortunately, I'm not having much luck in getting this working. Specifically, I'm having problems getting the tab content to fill up the remaining space and the tabs aligned against the bottom of the screen.
Your help is much appreciated!
For future reference, you should try to mention that you were using an external grid system. It took me a couple minutes to realize what was happening and why there were so many classes on things. Not a big deal though :-)
I think this new fiddle should be pretty close to what you're talking about, though:
theFiddle
I first had to set the height of the body and html to 100% so that their children could be 100% as well. I then floated the navDiv left and gave it a width of 25%. You can tweak that width as needed.
#navDiv {
width: 25%;
float: left;
position:relative;
}
I then used absolute positioning to get the tabs at the bottom, and to get the tab content above the tabs.
I added new classes in several places to avoid collisions with the grid library. I also had to use an important to override the margins on the segment class, since I didn't want to remove anything that you were using in your grid.
There may be a way to to this layout using that grid more effectively. As I said, I'm not familiar with it so I just used plain CSS.
Just as an aside, this is one my favorite resources for brushing up on CSS Layout. Thought you might find it helpful:
http://learnlayout.com/
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.
I've worked with CSS enough that I can get columns to work alongside content if I have a set number of columns: I simply define the sidebar(s) in the HTML prior to the content, and specify that they float to the left or right, while giving the content a margin-left or -right such that it doesn't flow into the space below the end of the sidebar.
I have a new challenge though, whereby the number of columns may vary between pages. In my HTML, I don't want to specify the sidebar content prior to the main page content though, which is the only way I know how to do it.
Essentially, I want the HTML to look like this:
<div id="container">
<div id="content">
<!-- Main body content goes here. -->
</div>
<div class="sidebar">
<!-- Sidebar DIV should appear to the right of the content DIV. -->
</div>
<div class="sidebar">
<!--
Another sidebar DIV, with this one *preferably* appearing to the
right of the one above, since it appears lower in the code and is
assuming LTR. I'm open to CSS that makes this sidebar appear to
the left instead of the right, however.
-->
</div>
<!-- Any number of additional sidebar DIV's can appear here. -->
</div>
I'm not sure if I should be trying to float the content/sidebar DIV's, make them position absolute, specify the width, etc. to make the content stretch automatically with the variable number of sidebars. It's probably worth noting that the size of each sidebar will be constant.
div.sidebar {
width: 100px;
}
On final note: if there's an improvement I can make to the HTML that will help, (e.g.: surrounding all the sidebar DIV elements in a parent DIV such as <div id="sidebars">), I'm open to suggestions there as well.
I guess I'll have to accept the fact that this requires HTML tables since no one can offer a CSS solution for this.