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; }
Related
I have the following styles defined for two divs inside a containing div. I want to float the first inner div left and the second inner div right. I also want to make them margin left or margin right respectively by 15px. The problem is I want to keep my 'float left/float right' styles clean of the margin specification.
I want to be able to specify the class and add to it like so:
#termsPageButtonContainerCheckbox.leftAlignedControl {
margin-left: 15px;
}
The problem is, the margin-left will only be respected when i place it in the float style:
.leftAlignedControl {
float: left;
}
Here is a demo i set up on JSFiddle: [Removed by OP]
You are not targeting the id correctly. You either need to change the HTML id to termsPageButtonContainerCheckbox or change the CSS to #termsPageForm:termsPageButtonContainerCheckbox
http://jsfiddle.net/c5or4hjg/1/
The button has 2 ID's, but only its only possible to give it one id and its not possible to use : in an id for as fas as i know. So it will work if you remove one of the 2 parts used (the one before or after :)
I wish to make the blue circles float left for odd numbers and right for even numbers. I've tried floating the elements but it doesn't seem to work.
I've used table and table-cells to achieve the centered text and logos but cannot seem to get them to inverse unless i switched the positioning of the elements
enter code here
Here is a current demo:
https://jsfiddle.net/7g7medn1/
Result Demo (re positioned dom elements to achieve result, need to do it without re positioning them):
https://jsfiddle.net/wcttx9vm/
you might need to a add class for the even columns and change floating and display properties as follows:
.even .content {
display: block;
}
.even .circle {
float: right;
}
.even .content {
display: inline;
}
https://jsfiddle.net/zxhbbwdm/4/
what I don't understand: When you want a table, why you don't use ? A table can be used to display table-content, but not for pure layouting.
In your case I would do it like this: Take a php-file and do the "layouting" there. That means that you will do the even-odd-placement in a for-loop and switch the odd layout there. I guess it would be the easiest way.
And your current demo code can't work, since your bubble is always first in code. That is ok for the left positioning, but for right positioning it needs to be after the text. Otherwise you will screw it up.
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.
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.