I am trying to remove the padding right and left on smaller screen for the grid items below:
<!-- row block -->
<div class="row row-cards">
<!-- grid container -->
<div class="grid-container">
<!-- grid x -->
<div class="grid-x grid-padding-x">
<!-- item -->
<div class="cell medium-6">
xxx
</div>
<!-- item -->
<!-- item -->
<div class="cell medium-6">
xxx
</div>
<!-- item -->
</div>
</div>
</div>
<!-- row block -->
CSS:
/* Small only */
#media screen and (max-width: 39.9375em) {
.row-cards {
.grid-container {
padding: 0;
}
.grid-padding-x {
padding: 0;
.cell {
padding: 0 !important;
}
}
}
}
But the overwrite does not work. This is what I get:
This is what I am trying to get:
Any ideas?
Have you tried the class .small-padding-collapse on your grid-x wrap, like this:
<div class="grid-x grid-padding-x small-padding-collapse">
https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells
My hack (LESS):
/* Small only */
#media screen and (max-width: 39.9375em) {
.row {
background-color: #ffffff;
.grid-container {
padding-right: 10px; // a temporary hack
padding-left: 10px; // a temporary hack
max-width: 100%;
margin: 0 auto;
}
.grid-padding-x {
.cell {
padding-right: 0;
padding-left: 0;
}
}
}
}
So, I'm pretty certain it's not possible to do the following, but thought I'd ask anyway!
I've got 2 columns of content on my website design. Both have a wrapper div, floated, so they sit side by side. This looks fine on the desktop layout, and on the mobile (responsive) layout they currently both fill out to 100% width, and stack on top of each other.
What I'd really like to do is change the order of the nested divs inside each floated wrapper on the mobile layout so that, essentially, the two columns merge into one single column and the nested divs ordering changes as below:
DESKTOP
1 5
2 6
3 7
4 8
MOBILE
1
5
2
3
6
7
8
4
Hope this is clear enough! I know I can use flexboxes to change the order on the mobile layout, but as far as I can get is to change the order only within each individual wrapper div. Have also tried floating the nested divs in various ways on the desktop layout, but to no avail.
EDIT:
Apologies, I should have pasted my code, either:
<div id="container">
<div class="wrapper-left">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
</div>
<div class="wrapper-right">
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
or
<div id="container">
<div class="wrapper">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
Also here's an image to illustrate what I'm after. Sincere apologies, it's my first question here!
After the feedback on the comments, I change my answer using flexbox and order property as you point in your question that you have tried before. You do not need two wrappers to get it, instead.
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#container{
width: 100%;
height: 100%;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.divInside{
border: 1px solid;
height: 25%;
width: 50%;
flex-basis: 49%;
}
.div1{
order: 1;
}
.div2{
order: 3;
}
.div3{
order: 5;
}
.div4{
order: 7;
}
.div5{
order: 2;
}
.div6{
order: 4;
}
.div7{
order: 6;
}
.div8{
order: 8;
}
#media screen and (max-width: 400px){
.wrapper{
width: 100%;
}
.divInside{
flex-basis: 100%;
}
.div3{
order: 4;
}
.div4{
order: 8;
}
.div8{
order: 7;
}
}
<div id="container">
<div class="wrapper">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
It would be simple to solve this if you set the HTML to a css table structure (display:table-row; and display:table-cell;) setting the desired values for the Desktop format.
Then, using media queries you just set these display properties on the desktop size, and when it goes to mobile size it will stack one on top of the other:
.main > div > div {
border: 1px solid silver;
}
#media (min-width: 400px) {
.main {
display: table;
width: 100%;
}
.main > div {
display: table-row;
}
.main > div > div {
display: table-cell;
}
}
<div class='main'>
<div>
<div>1</div>
<div>5</div>
</div>
<div>
<div>2</div>
<div>6</div>
</div>
<div>
<div>3</div>
<div>7</div>
</div>
<div>
<div>4</div>
<div>8</div>
</div>
</div>
Note: Firefox ONLY Solution
There is an experimental CSS display property of contents which will allow us to have our required structure but unbundle the respective wrappers as required.
I record it here for information purposes pending adoption by other browsers.
MDN Reference
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
Codepen Demo
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
}
.wrapper {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
}
.red > .divInside {
background-color: red;
}
.yellow > .divInside {
background-color: yellow;
}
.divInside {
border: 1px solid;
height: 25%;
width: 100%;
order: 0;
}
.red .divInside:nth-child(1) {} .red .divInside:nth-child(2) {
order: 3;
}
.red .divInside:nth-child(3) {
order: 5
}
.red .divInside:nth-child(4) {
order: 8
}
.yellow .divInside:nth-child(1) {
order: 2;
}
.yellow .divInside:nth-child(2) {
order: 5
}
.yellow .divInside:nth-child(3) {
order: 6
}
.yellow .divInside:nth-child(4) {
order: 7
}
#media screen and (max-width: 760px) {
.wrapper {
display: contents;
}
#container {
flex-direction: column;
}
}
<div id="container">
<div class="wrapper red">
<div class="divInside">1</div>
<div class="divInside">2</div>
<div class="divInside">3</div>
<div class="divInside">4</div>
</div>
<div class="wrapper yellow">
<div class="divInside">5</div>
<div class="divInside">6</div>
<div class="divInside">7</div>
<div class="divInside">8</div>
</div>
</div>
I have two rows containing tree columns each. On a Responsive breakpoint, I'd like to switch to tree lines of two columns.
Due to the initial structure, this does not seem possible (I can only make 1 colum rows, or tree column rows, bot not two column rows).
No JS please...
How is this usually solved? DEMO HERE
CSS
.col {
float: left;
width: 33.33%;
background: red;
text-align: center;
}
#media (max-width:500px) {
.col {
width: 50%;
}
}
HTML
<div class="row" style="overflow:auto;">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row" style="overflow:auto;">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
Try this code
.contain {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
min-width: 33%;
}
#media (max-width:500px) {
.col {
min-width: 50%;
}
}
<div class="contain">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I tried making the html layout on the picture. The light blue col-md-2 divs contain images, the darker blue col-md-4 is an image too. The pink divs contain text. Please give a simple html layout which does what's on the picture.
of course it's possible. Here is a totally functional example:
Example in Codepen.io
body {
height: 100%;
width: 100%;
}
.container {
width: 1000px;
max-width: 100%;
height: 100%;
background: #E5FF5E;
padding: 100px 100px 100px 100px !important;
}
.row {
min-height: 1000px;
background: red;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.rows {
height: 200px;
margin-bottom: 10px;
}
#left-container {
background: #6AFF98;
height: 1000px;
display: table;
}
#right-container {
background: #6FFFE9;
height: 1000px;
}
#media (max-width: 767px) {
#left-container {
width: 100%;
}
}
#media (max-width: 991px) and (min-width: 767px) {
#left-container {
width: 100%;
}
}
#media (max-width: 991px) {
}
#r1c1 {
height: inherit;
background: #FF76FD;
}
#r1c2 {
height: inherit;
background: #A1FFE8;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="left-container" class="col-md-8">
<div class="vertical">
<div class="rows">
<div id="r1c1" class="col-md-8"></div>
<div id="r1c2" class="col-md-4"></div>
</div>
<div class="rows">
<div id="r1c1" class="col-md-4"></div>
<div id="r1c2" class="col-md-8"></div>
</div>
<div class="rows">
<div id="r1c1" class="col-md-8"></div>
<div id="r1c2" class="col-md-4"></div>
</div>
</div>
</div>
<div id="right-container" class="col-md-4"></div>
</div>
</div>
</body>
Yes it is possible but each '.row' has to have columns inside of it equal to 12 columns. So the parent column divs equal 12 col-md-8 and col-md-4. But the child divs inside the col-md-8 div does not equal 12. So those would have to be 8 and 4 also. Or 9 and 3... as long as it equals 12. It just depends on what the content will be. Also you can contain all that in a div and center that div to the view port.
But that layout is possible. Below I focused on and made an example on the grid system layout you should be using.
I've colored the columns so you can see the grids layout. Hope this helps!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class='main-container'>
<div class='row'>
<div class='col-xs-8' style='Background-color: red; height: 300px;'>
col-8
<div class='row'>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
</div>
<div class='row'>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
</div>
<div class='row'>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
</div>
</div>
<div class='col-xs-4' style='background-color: blue; height: 300px;'>col-4</div>
</div>
</div>
All columns in Twitter Bootstrap are floating elements. So you can't get content centre aligned just by Twitter Bootstrap classes. You can try styles like display: table-cell; vertical-align: middle; on the blocks: col-md-8 and col-md-4.
Check http://jsfiddle.net/rajesh14mar/qc9zfpo6/
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"