In Bootstrap 3 I am able to do the follow (for semantic markup):
.div1 {
.make-xs-column(12);
}
.div2 {
.make-xs-column(12);
}
Example HTML:
<div class="div1">
<!-- Stuff Goes Here -->
</div>
<div class="div2">
<!-- More Stuff Goes Here -->
</div>
Within inline class definitions I can change the order of div1 and div2 by doing:
<div class="div1 col-xs-push-12">
</div>
<div class="div2 col-xs-pull-12">
</div>
Is it possible to change the column ordering with LESS mixins? Or is this feature not currently available? Would it be good practice to do something like this?:
.div1 {
.make-xs-column(12);
.col-sm-push-12;
}
.div2 {
.make-xs-column(12);
.col-sm-pull-12;
}
Edited: I meant to ask about xs columns rather than sm. Should I do pull and push on sm+ devices and reverse the order of my markup?
It is the same story as with .make-*-column(), i.e. there're .make-*-column-offset .make-*-column-push and .make-*-column-pull mixins.
Related
Is it possible to remove the padding from one particular grid within Boostrap 3 -
I need to layout images responsively but the design requires no gaps between columns.
Bootstrap 3 introduced row-no-gutters in v3.4.0
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Yep you can do it by creating a custom style sheet and adding a additional css selector to the col class. [http://www.bootply.com/FtnGzu0dea][1]
/* CSS used here will be applied after bootstrap.css */
.thumbnails {
padding: 0;
}
<div class="wrapper">
<div class="container">
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
</div>
</div>
[1]: http://www.bootp
ly.com/FtnGzu0dea
My suggestion is to add a class for removing the padding at a certain media query width. Here is a test case that uses a header image that should respect the padding at all but the small size. At that point it has no padding and fits the full width of the viewport. I highly recommend using #screen-xs-max if you are compiling LESS source files. It avoids the one pixel jump for media queries that use max-width.
http://jsfiddle.net/jmarikle/htmn5Lov/
CSS
#media (max-width: 767px) { /* replaced with #screen-xs-max if using LESS */
.sm-no-padding [class*=col-] {
padding: 0;
}
}
HTML
<div class="row sm-no-padding">
<div class="col-sm-12">
<img class="img-responsive" src="//placehold.it/2000x1000"/>
Image and/or content in a row where we remove the padding for small screens
</div>
</div>
If you want more granular control with columns rather than at the row level, just apply the class to the columns and change your selector to [class*=col-].sm-no-padding
You can also create a new CSS class and add the following code into your stylesheet.
Custom CSS:
.no-padding > [class*='col-'] {
padding-right:0;
padding-left:0;
}
new CSS to use into your HTML div
.no-padding
Essentially, what I have in mind is a bunch of div elements, and I want to alternate colours. I could do this using IDs, but I want to use classes to minimize the amount of extra (and potentially spaghetti) code needed.
<div id="divs">
<div class="bla">
</div>
<hr/>
<div class="bla">
</div>
</div>
I've already tried nth-child, but it didn't work.
Edit: And I want to keep the hr.
You need to remove the <hr> element, see this fiddle
HTML
<div id="divs">
<div class="bla">bla</div>
<div class="bla">bla</div>
</div>
CSS
div.bla:nth-child(even) {
background-color: #CCC;
}
div.bla:nth-child(odd) {
background-color: #FFF;
}
i am using zurb foundation for building website, but now i am facing a problem as follows
There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case,
I know, i am missing small point, but cant get it
here is the image of problem
I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none
The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.
What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.
However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use
#media queries in the stylesheet to specify where and when.
Examples:
#media (query goes here) {
.row .columns:last-child {
float: left;
}
}
** OR **
.left {
float: left !important;
}
THEN
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns left">4 ... </div>
</div>
Try this fiddle
HTML
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
CSS
div.columns
{
padding:10px;
background:#00bfff;
width:20%;
display:block;
float:left;
}
#jnelson thanks for the help, now i realized the power of !important, so i have created simple solution
.abc{
float:left !important;
}
This also worked correctly on all type of devices
You should not be changing the fundamental structure of how the columns are sized or work.
Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).
If you absolutely have to use 3 columns I agree with the above posts that you need to change.
[class*="column"]+[class*="column"]:last-child {
float: right;
to
[class*="column"]+[class*="column"]:last-child {
float: left;
Quick question involving foundation. If I want divs to go in order 1 then 2 on desktop and 2 then 1 on mobile, how would I accomplish this using Zurb?
<div class="row">
<div class="three columns">
</div>
<div class="nine columns">
</div>
</div>
Thanks so much for the help!
This can definitely be done. In your code you should order the div's based on how you would display it on the mobile, i.e. 2 then 1. For displaying it properly on larger screens you can override the default styling of the div's.
For testing purposes you can try:
<div class="row">
<div class="nine columns" style="float:right;">
</div>
<div class="three columns" style="float:left;">
</div>
</div>
While the above solution will work, I suggest not using inline styling. I would rather override using custom classes and/or #media tags.
Using those the code would be:
For the HTML:
<div class="row">
<div class="nine columns pull-right">
</div>
<div class="three columns pull-left">
</div>
</div>
For the CSS/Stylesheet:
#media only screen and (min-width: 768px) {
.pull-left {float: left !important;}
.pull-right {float: right !important;}
}
Not sure you can do this strictly with css, but with javascript you can add the pull-x classes when applicable.
theory:
Place the columns in the order you want for the mobile device, or small screens rather. Then in document.ready, check whether show-for-small is visibile or not, if not, you are on a larger screen and can apply push|pull classes to your columns of choice.
pseudo code, assuming you know push/pull technique:
// do this if not on small screen
if ( $('.show-on-small').css('display') == 'none' ) {
// pull or push the columns as needed
$('.myColumnsToPull-two').addClass('pull-two');
} else {
// might be a good idea to revert above change
}
I'm using Bootstrap to set up my site layout and have something like:
<div class="row-fluid">
<div class="span3">
</div>
<div class="span9">
</div>
</div>
That works fine. However, I'm slightly bothered by the fact that this is defining the presentation in the markup and to make it easier to make future changes, I'd like to add another layer of indirection. I'd like to add my own class that defines the semantics and then include the Bootstrap class that defines the layout presentation. For example:
<div class="main-block">
<div class="side-bar">
</div>
<div class="content-area">
</div>
</div>
and my corresponding less file...
#import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }
The less documentation states that you can "embed all the properties of a class into another class by simply including the class name as one of its properties" so it looks like it should work, but I am getting an error:
.row-fluid is undefined
Is there something that I am missing? Or is there a better way to go about this? This is in a rails 3.2 project using the less-rails-bootstrap gem if that makes any difference.
It's a little bit more complicated. What you're referring to is essentially what "mixins" are all about. First, let's resolve the error. From the little I see my bet is that you are trying to compile a "custom".less file and that you did not #import the variables.less and mixins.less files at the top of the page. Is that correct? If so, see if that gets the code to compile as expected.
However, once you get the code to compile you'll see that you have a new problem. In this particular case, by attempting to use a name other than .span you will lose any styling that is applied by the attribute selectors in the grid mixin, namely [class*="span"]. Compiled, it looks like this:
[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }
So in this case the attribute selectors apply their styles to any class that starts with "span".
Here are a couple of options that might be better for you:
1) Adding the word "span" before your custom class names should work
<div class="row main-block">
<div class="span-side-bar">
</div>
<div class="span-content-area">
</div>
</div>
2) And using multiple classes will work, but only if you don't apply any styling to the custom classes that would negate any styles in the native grid classes:
<div class="row main-block">
<div class="span3 side-bar">
</div>
<div class="span9 content-area">
</div>
</div>
3) My recommendation is to live with the little bit of extra markup required to maintain the default Bootstrap grid system. Renaming sounds great now, but if you have any desire to merge in future updates, the one mixin I'd leave alone is the grid.
<div class="row">
<div class="span3">
<div class="side-bar">
</div>
</div>
<div class="span9">
<div class="content-area">
</div>
</div>
</div>