I have a row with X possible columns.
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<!-- ... and so on ... -->
</div>
</div>
Now I would like to add margin-top:20px to all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.
Is that somehow possible with only the use of CSS?
You can use a media query for whenever you want the top margin..
#media (max-width: 767px) {
.col-xs-6 {
margin-top:20px;
}
}
http://www.bootply.com/126007
P.S. - There is nothing wrong with having the total of .col-* in a .row exceeding 12 (ie: http://getbootstrap.com/css/#grid-example-mixed). It simply causes a wrap. There are several examples in the docs that use this technique. It's generally not ideal for nested rows.
I needed something similar and following is the solution I came up with. Documenting it for future readers (and myself)
$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);
#for $r from 1 through 10{
#each $res-abbr, $res-vals in $res-list{
#media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
#each $dir-abbr, $dir-name in $dir-list{
$x: $r * 5;
.m#{$dir-abbr}-#{$res-abbr}-#{$x}{
margin-#{$dir-name}: #{$x}px;
}
.m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
margin-#{$dir-name}: #{$r}unquote('%');
}
}
}
}
}
This SASS code generates classes along the lines of following
#media (min-width: 0px) and (max-width: 767px) {
.mt-xs-5 { margin-top: 5px; }
.mt-xs-1p { margin-top: 1%; }
.mr-xs-5 { margin-right: 5px; }
.mr-xs-1p { margin-right: 1%; }
.mb-xs-5 { margin-bottom: 5px; }
.mb-xs-1p { margin-bottom: 1%; }
.ml-xs-5 { margin-left: 5px; }
.ml-xs-1p { margin-left: 1%; }
}
So the content editor can use .mt-xs-10 to apply margin-top: 10px to given element on extra-small screen.
I hope it helps somebody.
This is an old post but below is a clean solution.
[class*="col-"] {
margin-bottom: 15px;
}
This works well for some situations but it adds extra, unnecessary margin when it's not needed.
To solve this, we can create a new css class that applies top margin to columns when they get stacked. I create a class named .row-grid
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
#media (min-width: 1200px) {
.row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
margin-top: 0;
}
}
#media (min-width: 992px) {
.row.row-grid [class*="col-md-"] + [class*="col-md-"] {
margin-top: 0;
}
}
#media (min-width: 768px) {
.row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
margin-top: 0;
}
}
I use this simple and clean solution:
.row { margin-top: -15px; }
.row > div { margin-top: 15px; }
In that manner, every <div class='col-*-*'> has 15px margin on top, except those on the first row (or, on mobile, except the one on the top).
This simple solution automatically applies a top margin to all columns except the first, at extra small screen sizes. No special class names or other modifications to HTML or CSS are necessary. (Change the margin-top value below to whatever you prefer.)
#media (max-width: 767px) {
[class*="col-"]:not(:first-child) {
margin-top: 30px;
}
}
Related
I have 2 Vue components, dividing the page into 2 parts. Left side, and right side. I'm using this two on every page, like this:
<template>
<div class="page-body">
<left-side>
<p class="text" >{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
</template>
But there is a special case, when this two components should switch place, to render the right-side before the left-side, when using responsive mobile design. What would be the way to accomplish this behavior? I'm using Vue 2.3.3
This is a CSS question. Lay them out in a flexbox and use the order property in a media query to change the order.
The example below will swap the two colored areas when the display width is between 300 and 600 pixels.
.page-body {
display: flex;
}
left-side,
right-side {
background-color: #fdc;
display: block;
flex-basis: 50%;
}
right-side {
background-color: #cdf;
text-align: right;
}
#media (min-width: 300px) and (max-width: 500px) {
left-side {
order: 2;
}
}
<div class="page-body">
<left-side>
<p class="text">{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
If you use Vuetify, you can easily do that with the order property:
<v-row>
<v-col class="col-11 col-md-6" order-md="2">
<p>On mobile: on the left; otherwise on the right</p>
</v-col>
<v-col class="col-11 col-md-6" order-md="1">
<p>On mobile: on the right; on tablet/desktop(-> md) on the left</p>
</v-col>
</v-row>
Without flex, you can achieve this with floats, here is short example:
.right, .left {
box-sizing: border-box;
border: black 1px solid;
width: 50%;
height: 130px;
}
.left {
float: left;
}
.right {
float: right;
}
#media (max-width: 768px) {
.left, .right {
float: none;
width: 100%;
}
}
<div class="right">
second
</div>
<div class="left">
first
</div>
If anyone uses vuetify and wants to change the order of appearance of v-flex elements
In Large Display, i.e. Tablet to Laptop:
Use a scoped css like the following to reverse the order row-wise |A|B| will become |B|A|:
.layout.row.wrap {
flex-direction: row-reverse;
}
In Mobile View, changing the order of column:
Should use a scoped css such as follows to reverse the order when they are shown in a mobile devices:
#media (max-width: 425px) {
.layout.row.wrap {
flex-direction: column-reverse;
}
}
Here, max-width can be set to any convenient value to meet the requirement. If only in one layout the reverse ordering is needed but normal order in all other cases, then the specific layout can be separated in a component where this custom styling may be applied.
More about Ordering Flex Items
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<div class="small_only">
<h1>SMALL</h1>
</div>
<div class="large_only">
<h1>This should only be visible in large windows</h1>
</div>
</div>
</div>
</div>
Problem: The output contains only the word "SMALL" no matter how wide the screen is.
I feel like I'm missing something obvious, but for the life of me I can't figure out what it is.
Don't use // for comments in CSS..
Use /*..*/
http://www.codeply.com/go/uMSHCzymw3
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
EDIT
Codeply's CSS compiler which uses ACE editor picked it up..
I have one element
HTML
<div class="content col-md-10 col-md-offset-1">
</div>
What i need in LESS i something like this
.content{
.col-md-10;
.col-md-offset-1;
}
That later i can use shortner code like this
<div class="content col-md-10 col-md-offset-1">
</div>
I know i must use only content like this
<div class="content">
</div>
I have tried something like this but does not work?
.content{
.make-md-column(10);
.make-md-offset(1);
}
Update
It's called make-md-column-offset not make-md-offset
Running the following through any Online Less Compiler should work:
#grid-gutter-width: 30px;
#screen-md-min: 992px;
#grid-columns: 12;
// Generate the medium columns
.make-md-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
// Calculate width based on number of columns available
#media (min-width: #screen-md-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(#columns) {
#media (min-width: #screen-md-min) {
margin-left: percentage((#columns / #grid-columns));
}
}
.content{
.make-md-column(10);
.make-md-column-offset(1);
}
Original
My guess would be you have something missing from the build process like importing the mixin functions or variables.
Here is the section on bootstrap grid mixins:
http://getbootstrap.com/css/#grid-less
Here is a Example Usage:
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
So your syntax looks fine. I'd make sure you don't have any build errors.
I want to collapse columns so that they become stacked when they're viewed in mobile view, but I want to ignore that entirely when in print view.
So if I have this:
<div class="row">
<div class="col-md-6">
These columns should be stacked in mobile view...
</div>
<div class="col-md-6">
...but not in print view.
</div>
</div>
I'd like them to collapse only when I have a small screen but it's not print view. So the behavior for print view is as if col-md-6 was replaced with col-xs-6.
Using col-xs-6 and the like stops it from collapsing in print view, but of course then it doesn't collapse in screen view.
I want to avoid using one of the print visibility classes because then I'll have to duplicate the content, and I would only be changing the classes of the divs.
I tried getting a version of Bootstrap without “responsive utilities” checked, and then enabling the non-responsive version with <link href="..." rel="stylesheet" media="print" /> and the responsive version for media="screen", but it still collapsed in both.
How can I collapse the columns only in small non-print views?
Sorry, my comment was too brief. You need to set a media query with the print styles you want to use. Assuming you want the md classes to print in columns, add this to your custom css file:
#media print {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-1 {
width: 8.333333333333332%;
}
}
I can replace this code with
<div class="row">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
With this, to make it more semantic
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.makeRow();
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
How can I do this with the fluid grid though:
<div class="row-fluid">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
<!-- Less stylesheet -->
.article {
???
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
I have tried:
.article { #grid > .fluid(#fluidGridColumnWidth768, #fluidGridGutterWidth768);}
and some variations on it from some related stackoverflow posts but its not getting responsive.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
.article {
.makeFluidRow();
.main-section {
.makeFluidCol(10); //Spans 10 cols
}
.aside {
.makeFluidCol(1,1); //offset by one, spans 1
}
}
Ok, I think I have got it. I am updating the question to add offsets with the fluid layout as this is where I ran into the most trouble.
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.main-section {
#grid > .fluid > .offset(2);
#grid > .fluid > .span(8);
}
.aside {
#grid > .fluid > .span(2);
}
}
I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.
To fix it, I just extended the .makeColumn() mixin in a LESS file that loads after the Boostrap files.
// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(#columns: 1, #offset: 0) {
#media (min-width: 1200px) {
margin-left: (#gridColumnWidth1200 * #offset) + (#gridGutterWidth1200 * (#offset - 1)) + (#gridGutterWidth1200 * 2);
width: (#gridColumnWidth1200 * #columns) + (#gridGutterWidth1200 * (#columns - 1));
}
}