I'm just geting started with twitter bootstrap and wanted to know what the best approach for changing the default width from 940px to 864px is. I tried using the customize page to change the #gridColumnWidth variable to 50px. which should make the total width 820px but the default width is just adjusted to 1170px after downloading. Should I just leave the default at 940px and nest a div with a width of 864px inside my .row>.span12 divs?
I also tried using the less files but when I try to compile them as css files I get errors that say classes, id's, and variable are undefined.
Thanks for any help,
Jason
It's working fine for me using the customize page.
Make sure to modify #gridColumnWidth, #gridColumnWidth1200, and #gridColumnWidth768 (and optionally #gridGutterWidth*).
The 1170px width you're seeing corresponds to #gridColumnWidth1200.
You can override the default styles by placing another CSS file with the same selectors and desired formatting after bootstrap.css. Optionally you can also just use selectors with higher specificity and then the order of the files will be irrelevant. Using !important should be a last resort as it complicates further use.
Related
Normally, to keep any body content from rendering underneath the fixed nav, I will add padding-top to the body element.
I do not like this because I have to either specify a hard unit value on the body padding, the height of the header, or both in order to be confident they will match up. I despise giving a header a hard-coded height, and then styling for each breakpoint becomes even more cumbersome, especially when I am building for a corporate site with lots of constantly changing business rules for their header with different conditions across different breakpoints.
How can I have a dynamically size fixed header that does not overlap with the body content without using hard unit values? I am not interested in using JavaScript, CSS only.
Here is a overly simplified example of what I am referring to: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu
In future CSS standard, you are able to set the height of the header as a variable and use it in padding-top of body.
At this moment, you may use different CSS preprocessors like SCSS, SASS, PostCSS-cssnext to achieve this goal.
Reference:
https://drafts.csswg.org/css-variables/
I have a site utilizing the bootstrap framework and I want to change the outside margins that are default for Bootstrap's '.container' class.
I want the margins narrower on the outsides, and I want to not have it jump to different sizes based on screen/resolution (For those who use Bootstrap, when the screen gets to a certain size .container class automatically jumps to a different set of margins.)
I just want a consistent margin throughout that I can set.
You can simply override the CSS. However, you should avoid modifying the Bootstrap files directly, as that limits your ability to update the library. Place your own, custom CSS after Bootstrap, and modify it however you choose.
Further, try using SASS or LESS and creating a variable for your margins/padding. Then you can reuse the variable for various breakpoints or custom containers, and have a single point to edit the margins/padding later.
Another good idea is to modify your containers with a custom class, so that the original styles are preserved. For example:
<style type="text/css">
.container.custom-container {
padding: 0 50px;
}
</style>
<div class="container">
Here's a normal container
</div>
<div class="custom-container container">
Here's a custom container
</div>
In bootstrap 4, container-fluid gives a full-width container
Create a css file of your own and attach it after boostrap.css (dont override the default css), and change whatever you want (include !important to your attribute if needed).
About narrow the outside, change 'padding-left' and 'padding-right' of class container (or container-fluid) to fit your will (default to both padding is 15px)
To fix the width of the web, you can include 'width: 1000px' (or whtever number (percent) you want) to 'container' class
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/
trying to set different layout using media queries
i have truble with defining divs layout according to the screen width
this is the fiddle result
and
the fiddle test project i am using
the problem is i would like it to get stack on top of others
red
green
blue
when hitting less then 1200 px
what am i doing wrong ?
The main problem you are having is that CSS is ignoring your #media code. You are using inline CSS, and inline CSS rules always wins from external CSS rules (== your #media code).
recommend reading up on the cascading order of CSS: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
For your jsfiddle, transfer all code from the style="..." to your css frame on the right, making it external css instead of internal CSS. Then just reorder it like this: if you want media to override default css, place your #media selector under the code you want to be overridden.
Not sure if this is what you want but check this out: http://jsfiddle.net/4v6FC/11/embedded/result/
I think you have a problem with css rules precedence: the display property defined in the style attribute of your div elements have more precedence than the one defined in your stylesheet, no matter the screen size.
For the example I just set this property for all div elements, outside the media query, and removed the display property from the style attribute.
Here is an article explaining cess rules precedence : http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Try using display:block instead of display:inline-block for class Middle
the problem is you have three containers who are taking the width and have display:inline-block. so they will be aligned parallel to each other. if you want this behavior, then you must warp them in a outer container and set its min-width to make it placed fixed in that position by specifying divs width in px rather than in %, see here.
if you want elements to stack over each other then you must use display:block. in this case you don't need anything else.
So I'm inspecting this site: http://www.grittirollo.it/ and it appears that the content that slides out has a fixed height. Is there no way to set this dynamically?
It appears as though the developer measured out how tall each portion of the sliders' box model would be when rendered, and then multiplied it by how many rows there were. From there, he/she set it manually in the CSS.
Elements on a webpage can typically be measured with their scrollHeight JavaScript property (element.scrollHeight) however some browsers don't have this and some browsers do it differently from others. (I believe Firefox's has to be done recursively down the tree of elements and Safari just uses the outermost element.) This should be possible without manually setting the height using JavaScript, you just may have to conditionally code it to work with all the browsers you want to support.
I don't see why it's necessary to set it dynamically. If the stuff is float:left; and they put a <div class="clear"> at the bottom of a hide-able section, you would be able to see the contents of that section when it was un-hidden with JavaScript. You could then adjust the layout with padding and margin to make it look pretty.
Or, they could have also used position:relative; and position:absolute; to layout the hide-able sections. It comes down to preference.