I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:
I would like to assign unique gutter widths to specific rows in my layout.
The rest of the website will make use of the underlying gutter width.
Is it possible? Any help would be much appreciated. Thanks in Advance / Trev
The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..
.row .col:not(:first-child),.row .col:not(:last-child) {
padding-right:5px;
padding-left:5px;
}
Demo: http://bootply.com/94849
Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:
.my-personalized-row {
margin-bottom: 5px !important; //If you want 5px of gutter width.
}
Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.
UPDATE:
I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.
Related
I have a WordPress website with a custom post type that I need to display in a Bootstrap grid.
Here's what I mean :
I need to create a gutter in the center, but obviously if I add a padding-left, it moves every element. I only need to add padding to the item on the right. Since the content is dynamic, I can't just add a class and type
.right-elements { padding-left: 10px; }
Is there a CSS property for even elements or something ?
( since the issue is not really unique I don't feel like I should add the code, but tell me if you need it )
Thanks !
If you're only interested in modifying even elements, you can use the :nth-child() rule:
.my-class:nth-child(even) { padding-left: 10px; }
IN order to keep the CSS rule I want for a div I have to add: "padding-left:70px!important" to apply generally.
but for the mobile, i would like padding-left:0px.
So I simply add to the media query of the mobile size "padding-left:0px!Important"
So I thought that automatically when switching to mobile size it will take the CSS style inside the media query as the one to use as both have!Important.
But does not happen, it still keeps the 75px padding.
Thanks
Order matters, later one with !important will overwrite previous (!important) one, see example below, whatever media query works for your mobile, make sure you order them correctly
(move your global CSS to top, and media query to bottom)
.test {
color: red !important;
}
.test {
color: green !important;
}
<span class="test">TEST TEST TEST</span>
CSS styles will take the most specific rule you supply, so make sure that your padding-left:0px!important rule is still more specific than the one declaring padding-left:70px!important.
If the specificity is identical, then CSS will use the last rule defined, so also ensure that your mobile override appears after the initial padding-left rule.
This is where you can check and understand specificity:
https://www.w3.org/TR/css3-selectors/#specificity
Bonus: calculate selector specificity: https://specificity.keegan.st/
I need to implement the following custom widths for a website I am creating but not clear on how to do this to override the bootstrap defaults:
width of website: 1590px;
container width: 1530px;
column gutters: 30px;
column widths: 230px;
I know that you should not touch the bootstrap default css file, so if I create a custom.css file, what do I put it in it?
I dont know LESS/SASS though.
First I recommand not to use a fixed width in pixels for the container, because then you loose responsive behavior. Use a percentage value instead (default is 100%), define a max-width: 1590px; for container and use a padding: 0 30px; for the left and right spacing.
In Bootstrap all columns use percentage values, too. A column of 230px width you get by using the col classes for 1/6 ( see more here: http://getbootstrap.com/css/#grid-options)
And the gutter-width of 30px is the Bootstrap default gutter-width, 15px left & right.
Rule number one with bootstrap is to never change Something on the files ^^ so if you Want Something like that, the best is to create another CSS file, copy bootstrap on it and make some modification
Simply override the existing bootstrap's class in your custom CSS.
For eg:
CSS:
.container {
width: 1530px;
}
Similarly, other classes can have new values of the existing properties of Bootstrap.
I´m creating a page with Bootstrap and I need to make 4 columns leaving a space between each column of 5px!
I followed this tutorial ( http://andre-abt.com/2013/11/26/how-to-use-the-bootstrap-3-grid-system-with-column-margins/
). But for me doesn't work fine because if a put a link inside of the column to wrap all column is also possible make click outside of the column. (It's possible click in that 5px of margin).
jsfiddle.net/andresgl/2f7Lhmwd/ (Conferences, Summits, Events)
I hope some can help me.
Thanks!
Overcomplicated example for what you want to achieve, but if you want to keep it as it is add
.item-menu {
position:relative;
}
http://jsfiddle.net/2f7Lhmwd/2/
a{ margin:0;padding:0; }
This will remove all padding and margins from the anchor tag.
I am using the boostrap CSS framework for one of my personal projects.
By default all the col- classes have a padding on both sides.
Which is good for some components.
But there are places where I don't want this extra padding.
So I usually just take a unique class (say containerName) being used to style that element and then-
.containerName {
padding-right: 0;
padding-left: 0;
//and whatever other css is required
}
I don't want to keep writing this again and again. So I decided to write a simple mixin just for that.
%removePadding {
padding-right: 0;
padding-left: 0;
}
and then use extend on .containerName
.containerName {
#extend %removePadding;
//and whatever other css is required
}
Is this an overkill?
Should I just add another class to those elements which has these two rules?
What is the best way to handle this?
I think you should use ".removePadding" as a class, once. Because in any case, you need to check which divs you want the padding, and which divs you don't. So if you just add ".removePadding" class to your div, right after your col-... class, you will have the same control, and more important than that, you won't be expanding your CSS file. And on the other hand, you can unterstand what is going on just by looking at your HTML file. Like common ".clearfix" classes.
Add this CSS rule (.removePadding class) after the bootstrap styles, to override them.