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"
Related
I am trying to create a round profile pic on a background image. I want the profile pic to be responsive and change size or maintain at an ideal position when switching from different screens.
Currently, I am using margin with fixed values to offset the position, but I don't think it is the right way. Please look at the following output. Even at code snippet all the alignment is off. I am not sure how do I actually code the width and height so that it will maintain at an ideal position on all screens. How to really set the margins or padding? I have tried col-sm and col-md with different parameters but it only takes col-md.
My ideal output is as follow:
iPhone X (The positioning of the profile pic and wordings are ok with the current code)
iPad (The positioning is OFF)
iPhone5/SE The position is OFF again
I have included JSFiddle, please help.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>
This might help you.. In order to make it more responsive use media queries..
To round an image use border-radius:50%; and also specify the width and height of the image.
.user{border-radius:75%; width:100px; height:100px;}
.name, .pic{float:left;}
.prof{width:300px; position:absolute; bottom:-35px; left:4%;}
.name{padding:25px 10px;}
#sfitness{position:relative;}
.name span{display:block; text-transform:none; font-size:16px;}
.name p{text-transform:uppercase; font-size:18px;}
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-8 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div></div>
</body>
Here is the updated code as you said it will be responsive I think you are also using bootstrap I updated the class and rewrite some CSS
you can check .user,.information, .information p class information is a new calss
* {
box-sizing: border-box;
font-family: Arial;
font-size: 12px;
}
img {
width: 100%;
}
.profile-name {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 5%
}
.user {
display: inline-block;
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
object-fit: cover;
float: right;
}
p {
display: flex;
flex-direction: column;
}
.information {
line-height: 16px;
margin-top: 20px;
}
.information p {
font-size: 152%;
font-weight: bold;
line-height: 19px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row" style="margin-top:-60px">
<div class="col-xs-4 col-sm-6 col-lg-1">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-xs-6 col-sm-8 col-lg-10 information">
<div class="row">
<p>Jane Worng<span>How are you</span></p>
</div>
</div>
</div>
</body>
Take use of Media Queries for the repsonsive aspect. Its way easier than doing it in javaScript:
body{
background-color: white;
}
#media only screen and (max-width: 750px) {
body {
background-color: black;
}
}
In this example the background-color of the body is white as long as the screen width is 750px or more.
I am having a problem getting the bootstrap grid to display properly. My code is as follows
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
All I see is:
grid
Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.
As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).
You don't need the .col-md-6 value in your div though:
<div class="container">
<div class="row">
<div class="col-md-6">Your text here</div>
<div class="col-md-6">Your text here</div>
</div>
</div>
For more information check out the official Bootstrap Documentation page on Grid Templates
For the grid view used in the documentation (grid.css) add the following CSS:
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
Modify as below
<div class="container show-grid">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
add the following css to your style sheet
.show-grid div{
border:1px solid ;
}
Bootstrap makes an "invisible" grid if you want to see it that way, if you want to make the grid visible you can do it with css either adding a background color or border, my favorite is background color:
css:
.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 y0">Your text here</div>
<div class="col-md-6 y1">Your text here</div>
</div>
</div>
I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
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 using Twitters Bootstrap grid system to create a site header like the example below:
This all works fine until you begin reducing the size of the screen in which case the title of the page and logo merge together like this:
Ideally I would like the end result to look like this when in a phone viewport:
Here is my current code
HTML
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
<h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3>
</div>
</div>
</div>
CSS
.classHeader
{
position: relative;
padding: 0;
height: 120px;
width: 100%;
margin: 40px 0 0 0;
border: 1px solid black;
}
.smallLogo
{
height: 115px;
width: 180px;
padding: 10px;
}
.fullWidth
{
width: 100%;
}
.bottomAlign
{
position: absolute;
bottom: 0;
}
.fifteenPxSpacing
{
margin: 15px;
}
And here is a Fiddle so that you can see exactly what is going on when you resize the browser to smallest.
Im aware that different browsers allow different minimum browser sizes in desktops, laptop etc so for reference im using Firefox 35.0
What I have tried
I tried setting the bootstrap columns to two as opposed to one column where each would have 50% of the row each but this didnt work.
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12"> //setting as one containing row first
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" /></div> //then attempting to break into two columns within parent row
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3></div>
</div>
</div>
</div>
your need to add the media query for this : also see the jsfiddle: http://jsfiddle.net/zj9v81t7/9/
#media screen and (max-width:640px){
.fifteenPxSpacing {
margin: 5px;
}
.pull-left {
right: 0;
}
}
You can add the col-xs-* classes to logo and header then it will be increased and decreased as per screen size. That i have done in my updated code you can check fiddle.
http://jsfiddle.net/swapnilmotewar/zj9v81t7/6/
.classHeader
{
position: relative;
padding: 0;
height: 120px;
width: 100%;
margin: 40px 0 0 0;
border: 1px solid black;
}
.smallLogo{
width: 100%;
height: 115px;
padding: 10px;
}
.fullWidth
{
width: 100%;
}
.bottomAlign
{
position: absolute;
bottom: 0;
}
.fifteenPxSpacing
{
margin: 15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.2/d3.min.js"></script>
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-6 pull-right ">
<img class="smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
</div>
<h3 class="fifteenPxSpacing pull-left bottomAlign col-xs-6">My New Title</h3>
</div>
</div>
</div>