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
Related
I have a page in Bootstrap but I want the .container to be wider. Can I change the width of this .container?
There are several possibilities:
custom css
As it has already been suggested, you can just overwrite the default in your own css. Keep in mind, that you'll probably have to use media queries define several of these for different screen sizes
customizing bootstrap
On bootstrap's own customization page you can change practically any definition and generate a customized version of bootstrap. Look for the section called Container sizes
fluid container
If you just want a container that spans the entire width of your screen, use .container-fluid instead of .container
<div class="container-fluid">
...
</div>
You can easily override the default presentation of Bootstrap, just include your own CSS file, and do the following:
.container {
/* Write your custom width here! */
}
I have a bunch of inputs in bootstrap that have input-group-addon tags as labels. On my page, I have labels of various lengths of text, but I want all the labels to be the same width for the visual effect. I'm trying to manually set the width of these span elements to the largest one I have on the page (for this example, say 75px).
Making my own CSS class doesn't do the trick, bootstrap overrides it somehow that I don't understand.
Making my own .input-group-addon.myClass CSS class doesn't work either. The browser shows that this isn't overridden by another style, but I don't see it actually effecting the span element.
Lastly, simply adding a style="width:75px" to the span doesn't work either.
I'm at a loss as to how I can ovveride this style to make all my span's line up regardless of text length.
Code example: http://www.bootply.com/SvJAiwVavY
I looked at your sample code. From Bootstrap, the .input-group-addon class has a display property set to table-cell, so there is no need to do anything other than set an appropriate width. If you set a width that is smaller than the contained text, it's not going to look like it has changed. Try changing your example code to the following:
.input-group-addon.test {
width: 200px !important;
}
You may want to change your text-align to something other than center, but that's up to you.
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.
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/
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.