I need to have a row with 8 columns in a large device, but then the lower number columns in a smaller device.
The bootstrap uses the 12-grid system and by default, you have options of col-1, col-2, col-3, col-4, col-6 and col-12. So, it is not possible to have a row with 8 columns.
Although there are plenty of workarounds and I've tested all manner of them (like: this and this), One of the up-voted StackOverflow's answers is this.
Based on the mentioned answer, Although the following solution works perfectly, it does not work if I use bootstrap's predefined classes like col-md-3, col-sm-4, etc.
.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
width: 12.5%;
float: left;
}
#media (min-width: 768px) {
.col-sm-8r {
width: 12.5%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-8r {
width: 12.5%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
The following code words perfectly.
<div class="row">
<div class="col-lg-8r">
...
</div>
</div>
If I add another col-sm-* or col-md-*, the custom column (col-lg-8r) does not work.
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-8r">
...
</div>
</div>
PS I don't like to use the nested columns and rows workaround.
Bootstrap version: 4.4.1
I think it would be easier to extend the existing Bootstrap 4.4 row columns. For example...
#media (min-width: 992px) {
.row-cols-lg-8 > * {
flex: 0 0 12.5%;
max-width: 12.5%;
}
}
8 columns on lg, then 6 columns below lg...
<div class="row row-cols-lg-8 row-cols-6">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
...
</div>
Demo: https://codeply.com/p/0H3qKEVCqz
The reason it's not working appears to be a CSS load order issue. If you are loading your CSS before bootstrap, it's getting overridden by BS classes. For a proof of concept, I've added a style tag with your CSS after the BS include in the HTML panel:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-xs-8r,
col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
flex: 0 0 12.5%;
}
#media (min-width: 768px) {
.col-sm-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 992px) {
.col-md-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 1200px) {
.col-lg-8r {
flex: 0 0 12.5%;
}
}
</style>
<div class="row">
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
</div>
If you keep your CSS loading where it is, you can get more specific (I added .row before the selectors):
.row .col-xs-8r,
.row .col-sm-8r,
.row .col-md-8r,
.row .col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.row .col-xs-8r {
flex: 0 0 12.5%;
}
#media (min-width: 768px) {
.row .col-sm-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 992px) {
.row .col-md-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 1200px) {
.row .col-lg-8r {
flex: 0 0 12.5%;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
</div>
IMPORTANT
On a side note, you are using Bootstrap 4 which is flex based. You should not be using float but rather flex-basis or the shorthand flex property.
I have ASP.NET project.I want it to change its view automatically when device is detected as mobile or as desktop.what are the ways available?please suggest some example projects.And i tried studying many tutos.But still i am unable to grasp them.So can any body suggest step by step method to do so?
For making your webpage responsive as per device
--> first you need to have bootstrap in your project.
--> you will be having container in your bootstap.css file(assets-->css-->bootstap.css).
--> container will be having different kind of screen types declared by default.like
EXAMPLE:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
--> you have to use these container in your cs file.In asp.net it is .aspx extention file.for
EXAMPLE:
<div class="below-slideshow" style="padding-bottom: 0px">
<div class="container"> <!-- NOTICE HERE:inside div declare class as container/container-fluid-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<h1 class="head-line">Dashboard</h1>
</div>
</div>
</div>
</div>
</div>
--> To know more about container and container fluid http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
HAPPY CODING :-)
I have a design where I have 3 divs.
On desktop mode - 2 divs are in the same row, and on mobile mode each of them is a full row, but the order needs to change.
For example this is my HTML (using foundation CSS):
<div class="row">
<div class="mobile-first small-12 large-8 columns">FIRST</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
<div class="row">
<div class="mobile-middle large-12 small-12">MIDDLE</div>
</div>
What needs to happen when I am on mobile screen is that the "LAST" div will go last, even though it is part of the first row.
Is it possible without duplicating the HTML, using JS or using strange float that will act strange on some devices?
This is the fiddle I've made:
Fiddle
You can wrap mobile-first and mobile-middle divs into an additional column. Then apply negative margin-right to the mobile-middle div on the wide screen.
Please check the result:
1) Bootstrap
https://jsfiddle.net/glebkema/ss8zbf6z/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media (min-width: 992px) {
.mobile-middle {
margin-right: -33.33333333% !important;
width: 150% !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="mobile-first col-xs-12">FIRST</div>
<div class="mobile-middle col-xs-12">MIDDLE</div>
</div>
</div>
<div class="mobile-last col-md-4">LAST</div>
</div>
</div>
2) Foundation
https://jsfiddle.net/glebkema/sbzgwf8t/
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media screen and (min-width: 64em) {
.mobile-middle {
margin-right: -33.33333% !important;
width: 150% !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<div class="container">
<div class="row">
<div class="small-12 large-8 columns">
<div class="row">
<div class="mobile-first small-12 columns">FIRST</div>
</div>
<div class="row">
<div class="mobile-middle small-12 columns">MIDDLE</div>
</div>
</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
</div>
As per #moped suggest. I can use same row div for all the colums.
The solution is simple if they are all in the same div, I can use display: flex.
#media only screen and (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.mobile-first{
order: 1;
}
.mobile-last{
order: 3;
}
.mobile-middle{
order: 2;
}
updated fiddle
I am trying to change the order of two divs in a container when they get to mobile size.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
Is this possible to change it so that it will change to
<div class="container">
<div class="div2"></div>
<div class="div1"></div>
</div>
Depending on which browsers you need to support, you can use flexbox to switch the order of the divs.
.container {
display: flex;
}
.div1 {
order: 0;
}
#media screen and (min-width: 780px) {
.div1 {
order: 1;
}
}
JS Fiddle
You can do it using flexbox by reversing the order.
.container {
display: flex; /* or inline-flex */
flex-direction: column;
}
#media(min-width:768px){
.container {
flex-direction: column-reverse;
}
}
http://codepen.io/partypete25/pen/oxJNqz
You can use pure css to do that
.container{
display:table;
}
.div1{
display:table-footer-group;
}
.div2{
display:table-header-group;
}
make sure you put it in a #media query.
You can use two separate classes and make only one visible at a time depending on the media width.
First create you CSS
//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view
#media screen and (min-width: 1025px) {
.desktop-container {
Display:none;
}
}
// This container is only visible on smaller devices with screen size 360px - 1024px
#media screen and (min-width:360px) and (max-width:1024px) {
.mobile-container {
Display:none;
}
}
Now create your markup...
<div class="desktop-container">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="mobile-container">
<div class="div2"></div>
<div class="div1"></div>
</div>
Problem:
Remove padding/margin to the right and left of col-md-* in Bootstrap 3.
HTML code:
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
</div>
Desired output:
Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?
Notice:
If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.
You'd normally use .row to wrap two columns, not .col-md-12 - that's a column encasing another column. Afterall, .row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins.
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
Bootstrap 4 has added .no-gutters class.
Bootstrap 3.4 has added .row-no-gutters class
Bootstrap 3: I always add this style to my Bootstrap LESS / SASS:
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Then in the HTML you can write:
<div class="row row-no-padding">
If you want to only target the child columns you can use the child selector (Thanks John Wu).
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
You may also want to remove padding only for certain device sizes (SASS example):
/* Small devices (tablets, 768px and up) */
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.row-sm-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
You can remove the max-width part of the media query if you want it to support small devices upwards.
Reducing just the padding on the columns won't make the trick, as you will extend the width of the page, making it uneven with the rest of your page, say navbar. You need to equally reduce the negative margin on the row. Taking #martinedwards' LESS example:
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Hereafter only available at Bootstrap 4
<div class="p-0 m-0">
</div>
note: .p-0 and .m-0 already added bootstrap.css
Specifically for SASS mixin:
#mixin no-padding($side) {
#if $side == 'all' {
.no-padding {
padding: 0 !important;
}
} #else {
.no-padding-#{$side} {
padding-#{$side}: 0 !important;
}
}
}
#include no-padding("left");
#include no-padding("right");
#include no-padding("top");
#include no-padding("bottom");
#include no-padding("all");
Then in HTML, you can use
.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides
Sure, you can #include only those declarations, which you need.
simply Add "no-padding" which is inbuilt class in bootstrap 3
Bootstrap 4 has a native class to do this : add the class .no-gutters to the parent .row
Another solution, feasible only if you compile bootstrap from its LESS sources, is to redefine the variable which sets the padding for the columns.
You will find the variable in the variables.less file: it's called #grid-gutter-width.
It's described like this in the sources:
//** Padding between columns. Gets divided in half for the left and right.
#grid-gutter-width: 30px;
Set this to 0, compile bootstrap.less, and include the resulting bootstrap.css. You are done. It can be an alternative to defining an additional rule, if you are already using bootstrap sources like I am.
Bootstrap 4 has the class .no-gutters that you can add to the row element.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12">
[YOUR CONTENT HERE]
</div>
</div>
</div>
Reference: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
Bootstrap 3, since version 3.4.0, has an official way of removing the padding: the class row-no-gutters.
Example from the documentation:
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
[class*="col-"]
padding: 0
margin: 0
None of the above solutions worked perfectly for me. Following this answer I was able to create something that works for me. Here I am also using a media query to limit this to small screens only.
#media (max-width: #screen-sm) {
[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: 0;
margin-right: 0;
}
.container-fluid {
margin: 0;
padding: 0;
}
}
Remove spacing from b/w columns using bootstrap 3.7.7 or less.
.no-gutter is a custom class that you can add to your row DIVs
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget row">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget row">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
You can add a class of row to the div inside the col-md-4 and the row's -15px margin will balance out the gutter from the columns. Good explanation here about gutters and rows in Bootstrap 3.
I guess it's easier to just use
margin:-30px;
to override the original value set by bootstrap.
I've tried
margin: 0px -30px 0px -30px;
and it worked for me.
Wrap your columns in a .row and add to that div a class called "no-gutter"
<div class="container">
<div class="row no-gutter">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
Then paste below contents to your CSS file
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
Remove/customize Bootstrap Gutter with css
reference: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
/* remove */
.gutter-0.row {
margin-right: -0px;
margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
padding-right: 0px;
padding-left: 0px;
}
/* customize */
.gutter-6.row {
margin-right: -3px;
margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
padding-right: 3px;
padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
You can create a new class for removing margin and can apply to the element where you want to remove extra margin:
.margL0 { margin-left:0 !important }
!important : it will help you to remove the default margin or overwrite the current margin value
and apply to that div from in which you want to remove the margin from left side
<style>
.col-md-12{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
You can create Less Mixins using bootstrap for manage margins and paddings of your columns like,
http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/
Usage:
xs-padding-lr-15px//left right both
xs-padding-l-15px
xs-padding-r-15px
Similarly for setting margin/padding zero you can use,
xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
Building up on Vitaliy Silin's answer. Covering not only cases where we do not want padding at all, but also cases where we have standard size paddings.
See the live conversion of this code to CSS on sassmeister.com
#mixin padding($side, $size) {
$padding-size : 0;
#if $size == 'xs' { $padding-size : 5px; }
#else if $size == 's' { $padding-size : 10px; }
#else if $size == 'm' { $padding-size : 15px; }
#else if $size == 'l' { $padding-size : 20px; }
#if $side == 'all' {
.padding--#{$size} {
padding: $padding-size !important;
}
} #else {
.padding-#{$side}--#{$size} {
padding-#{$side}: $padding-size !important;
}
}
}
$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
#each $current-side in $sides-list {
#each $current-size in $sizes-list {
#include padding($current-side,$current-size);
}
}
This then outputs:
.padding--none {
padding: 0 !important;
}
.padding--xs {
padding: 5px !important;
}
.padding--s {
padding: 10px !important;
}
.padding--m {
padding: 15px !important;
}
.padding--l {
padding: 20px !important;
}
.padding-top--none {
padding-top: 0 !important;
}
.padding-top--xs {
padding-top: 5px !important;
}
.padding-top--s {
padding-top: 10px !important;
}
.padding-top--m {
padding-top: 15px !important;
}
.padding-top--l {
padding-top: 20px !important;
}
.padding-right--none {
padding-right: 0 !important;
}
.padding-right--xs {
padding-right: 5px !important;
}
.padding-right--s {
padding-right: 10px !important;
}
.padding-right--m {
padding-right: 15px !important;
}
.padding-right--l {
padding-right: 20px !important;
}
.padding-bottom--none {
padding-bottom: 0 !important;
}
.padding-bottom--xs {
padding-bottom: 5px !important;
}
.padding-bottom--s {
padding-bottom: 10px !important;
}
.padding-bottom--m {
padding-bottom: 15px !important;
}
.padding-bottom--l {
padding-bottom: 20px !important;
}
.padding-left--none {
padding-left: 0 !important;
}
.padding-left--xs {
padding-left: 5px !important;
}
.padding-left--s {
padding-left: 10px !important;
}
.padding-left--m {
padding-left: 15px !important;
}
.padding-left--l {
padding-left: 20px !important;
}
Sometimes you might lose the padding that you want for the columns. They end up sticking to each other. To prevent that, you could update the class as follows:
<div class="col-md-3 NoPaddingForChildren">
<div class="col-md-6">
<label>Id</label>
<input ng-model="ID" class="form-control">
</div>
<div class="col-md-6">
<label>Value</label>
<input ng-model="Val" class="form-control">
</div>
</div>
and corresponding class:
.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
padding-left: 0;
padding-right: 0;
}
.NoPaddingForChildren > div:first-child {
padding-left: 0;
}
.NoPaddingForChildren > div:last-child {
padding-right: 0;
}
If you download bootstrap with the SASS files you will be able to edit the config file where there are a setting for the margin of the columns and then save it, in that way the SASS calculates the new width of the columns
You can customize your Bootstrap Grid system and define your custom responsive grid.
change your default values for the following gutter width from #grid-gutter-width = 30px to #grid-gutter-width = 0px
(Gutter width is padding between columns. It gets divided in half for the left and right.)
I still prefer to have control over every padding in every screen size so this css might be usefull to You guys :)
.nopadding-lg {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}
#media (max-width: 576px) {
.nopadding-xs {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-xs {padding-left: 0!important;}
.nopadding-right-xs {padding-right: 0!important;}
}
#media (max-width: 768px) {
.nopadding-sm {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-sm {padding-left: 0!important;}
.nopadding-right-sm {padding-right: 0!important;}
}
#media (max-width: 992px) {
.nopadding-md {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-md {padding-left: 0!important;}
.nopadding-right-md {padding-right: 0!important;}
}
you can use fork
https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437
gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"