So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
For a responsive website development I am using twitter bootstrap framework. According to the psd total width of the container is 980px, left-block width is 607px right-block width 373px.
If I use col-md-8 & col-md-4 the following width can't be achieved. So is there any poosibility to overcome it? Or Should I ask the designer to design according to the grid system (12 column) layout
http://jsfiddle.net/vasanthanvas/h36u8foc/
If you want to use grid for your website, ask the designer to design with grids, because it will be very hard for you to use a "semi-grid" layout.
But i think your container should be 960px instead of 980px because we can divide 960 by 2 and 3 but not 980px.
12 cols on 960 layout : 12 cols of 80px
12 cols on 980 layout : 12 cols of 81.666666667px
You can't with Bootstrap standard grid. This is a limit of all Grid Framework, based on columns layout.
A possible solution is provided in this updated example:
I added a "custom-grid" class to container div, in order to limit effect on customization to only this particular region.
Then, I added the following override rules for both column. With this % values, difference respect your desired result is limited in 1px.
.custom-grid .left-block
{
width:62%
}
.custom-grid .right-block
{
width:38%;
}
Instead, if you want to use Bootstrap standard, you must ask your designer to re-design layout based on columns.
Anyway, I suggest this other Grid System, called PocketGrid. I already used it in commercial solutions, and using % instead of cols, lets you total customization power.
If you have a designer that is not specifically designing a PSD(mockup) around bootstrap column sizes how do you make the two fit ? It seems to me the options are :
1. Generate a Custom bootstrap grid
2. Don't use bootstrap
3. Use a mix of bootstrap and fixed width columns (Yuck? )
I'm sure I'm not the only one who has ever faced this problem . Looking for real world solutions or documentation. Not theories.
thanks
When you have a psd file, the problem that you can encounter is the width of the blocks. The height don't causes problems, but the width ussually do because mabey the psd is not made to work with 12 colums like bootstrap does, but the solution for this case is the nested grid. You keep nesting the elements until you get the right width of your blocks. I didn't recived yet any psd that i could not build it with bootstrap.
Maybe this is a very simple question, but I am wondering if you can setup multiple layouts based on window size, and have them apply based off the users current window size?
Right now I use bootstrap with C# and I set one standard size like col-md-#, and then let everything below that just fall apart into pieces as elements start overlapping. This makes the site at least readable on small screens but it is still a mess since everything is all broken apart.
Example md/lg layout
moving to a smaller screen (sm/xs) then breaks those elements into pieces, which cascade vertically.
What I am wondering is if I can maybe setup a col-xs/sm-12, and then re-arrange the elements (or re-size items like images/tables/divs) to better suite a smaller screen. Basically have/display different layouts when moving from different screen sizes.
Is it possible that instead of just breaking the elements apart (like above) for smaller screens, to in fact run a different style for smaller screen sizes (below)?
TLDR: Does bootstrap currently support multiple layouts that are determined by window size, rather than having just one layout, and breaking everything apart for anything smaller?
If so, can a simple example be given showing two layouts being enacted by different window sizes.
Yes.
If your using bootstrap 3, you can simply define the layout for xs, which will then scale up until something bigger takes over.
for example
col-xs-6 col-md-12
col-xs-6 col-md-12
col-xs-12
col-xs-12
So when its on xs, it will display as 6 columns, then medium up will display on 12 columns.
The above is better described here http://getbootstrap.com/css/#grid
you can also use push/pull to adjust the ordering http://getbootstrap.com/css/#grid-column-ordering
I've got Zurb Foundation 4 setup in an example as per the instructions here.
When I create a basic page with one row and 3 columns with a width of 4 and I change the viewport (browser) size, the width of the columns do not change. They just stay at the static value of whatever it started at.
I was under the impression that it should 'just work' to scale the widths of the columns dynamically to be responsive to screen size.
Is there something I'm missing here?
Here is the test application demonstrating my troubles.
Just dawned on me that the problem was that I was setting a fixed width on the body element. Ooops!