Bootstrap Print Pdf - css

I am Trying To Print The layout,The Layout design is below:**
For Example:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
</div>
And My Print.CSS StyleSheet Is below:
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
The Columns are stacked below one by one like:
HI
CSS
HI
CSS
HI
CSS
But I want To Get it Like:
HI CSS
HI CSS
HI CSS
Can Anyone Help Me on this Please.
This is the preview i am getting


You should use the CSS Media Query Print.
You can find the documentation here http://www.w3schools.com/css/css3_mediaqueries.asp
#media print {
…
}

Related

how to mobile responsive these divs in css without if statements in your code?

I am trying to do this in react but I don't want any if statements. I want to do this in css.

.container {
width: 300px;
}
.div1 {
background-color: green;
height: 30px;
}
.div2 {
background-color: yellow;
height: 120px;
}
.div3 {
background-color: pink;
height: 60px;
}
#media all and (max-width: 400px) {
.div1, .div2, .div3 {
width: 100%;
}
}
#media all and (min-width: 401px){
.div1 {
width: 50%;
float: right;
}
.div2 {
width: 50%;
float: left;
}
.div3 {
width: 50%;
float: right;
}
}
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>

How to change breakpoint values in primevue/primefaces?

How can I change the default breakpoint values in primevue/primefaces ?
I mean setting values different than 576px for xs, 768px for md, 992px for lg etc.
A similar question has been asked here 3 years ago but no one answered.

After spending some time trying to come up with a solution, I've decided to go with this approach:
Import this css after you import your Primevue styles. Be sure to use
#media in the order it is provided below.
**
This will override Primevue's breakpoints
**
Lemme know if you found a better approach.
#media screen and (min-width: 0px){
.p-xs-1 {
width: 8.3333%;
}
.p-xs-2 {
width: 16.6667%;
}
.p-xs-3 {
width: 25%;
}
.p-xs-4 {
width: 33.3333%;
}
.p-xs-5 {
width: 41.6667%;
}
.p-xs-6 {
width: 50%;
}
.p-xs-7 {
width: 58.3333%;
}
.p-xs-8 {
width: 66.6667%;
}
.p-xs-9 {
width: 75%;
}
.p-xs-10 {
width: 83.3333%;
}
.p-xs-11 {
width: 91.6667%;
}
.p-xs-12 {
width: 100%;
}
}
#media screen and (min-width: 576px){
.p-sm-1 {
width: 8.3333%;
}
.p-sm-2 {
width: 16.6667%;
}
.p-sm-3 {
width: 25%;
}
.p-sm-4 {
width: 33.3333%;
}
.p-sm-5 {
width: 41.6667%;
}
.p-sm-6 {
width: 50%;
}
.p-sm-7 {
width: 58.3333%;
}
.p-sm-8 {
width: 66.6667%;
}
.p-sm-9 {
width: 75%;
}
.p-sm-10 {
width: 83.3333%;
}
.p-sm-11 {
width: 91.6667%;
}
.p-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 992px){
.p-md-1 {
width: 8.3333%;
}
.p-md-2 {
width: 16.6667%;
}
.p-md-3 {
width: 25%;
}
.p-md-4 {
width: 33.3333%;
}
.p-md-5 {
width: 41.6667%;
}
.p-md-6 {
width: 50%;
}
.p-md-7 {
width: 58.3333%;
}
.p-md-8 {
width: 66.6667%;
}
.p-md-9 {
width: 75%;
}
.p-md-10 {
width: 83.3333%;
}
.p-md-11 {
width: 91.6667%;
}
.p-md-12 {
width: 100%;
}
}
#media screen and (min-width: 1200px){
.p-lg-1 {
width: 8.3333%;
}
.p-lg-2 {
width: 16.6667%;
}
.p-lg-3 {
width: 25%;
}
.p-lg-4 {
width: 33.3333%;
}
.p-lg-5 {
width: 41.6667%;
}
.p-lg-6 {
width: 50%;
}
.p-lg-7 {
width: 58.3333%;
}
.p-lg-8 {
width: 66.6667%;
}
.p-lg-9 {
width: 75%;
}
.p-lg-10 {
width: 83.3333%;
}
.p-lg-11 {
width: 91.6667%;
}
.p-lg-12 {
width: 100%;
}
}
#media screen and (min-width: 1600px){
.p-xl-1 {
width: 8.3333%;
}
.p-xl-2 {
width: 16.6667%;
}
.p-xl-3 {
width: 25%;
}
.p-xl-4 {
width: 33.3333%;
}
.p-xl-5 {
width: 41.6667%;
}
.p-xl-6 {
width: 50%;
}
.p-xl-7 {
width: 58.3333%;
}
.p-xl-8 {
width: 66.6667%;
}
.p-xl-9 {
width: 75%;
}
.p-xl-10 {
width: 83.3333%;
}
.p-xl-11 {
width: 91.6667%;
}
.p-xl-12 {
width: 100%;
}
}
#media screen and (min-width: 2000px){
.p-xxl-1 {
width: 8.3333%;
}
.p-xxl-2 {
width: 16.6667%;
}
.p-xxl-3 {
width: 25%;
}
.p-xxl-4 {
width: 33.3333%;
}
.p-xxl-5 {
width: 41.6667%;
}
.p-xxl-6 {
width: 50%;
}
.p-xxl-7 {
width: 58.3333%;
}
.p-xxl-8 {
width: 66.6667%;
}
.p-xxl-9 {
width: 75%;
}
.p-xxl-10 {
width: 83.3333%;
}
.p-xxl-11 {
width: 91.6667%;
}
.p-xxl-12 {
width: 100%;
}
}

Website content not visible in mobile

I'm working on this website http://josedelavega.nowcommu.myhostpoint.ch
(Made using this Wordpress theme http://themeforest.net/item/orquidea-responsive-wordpress-theme/full_screen_preview/5120180)
On Desktop and tablet everything works great, but not on Smartphones (Samunsg Galaxy S6 in my case). The content looks like "blocked" or "hidden". If you check on Desktop first and than on Smartphone you can see the difference.
There is something wrong into the Media Queries?
#media (min-width: 1200px) {
}
#media (min-width: 980px) {
}
#media (max-width: 1000px) {
.cs-style-4 figcaption .descrtext {
display: none!important;
}
nav#topmenu {
display: none;
}
nav#mobilenav {
display: block;
}
.serviceslist,
.teamlist,
.plicetable {
margin-right: 15px;
}
.singleblog .textblock p {
margin-right: 15px;
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .ltar {
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .rgshare {
margin-right: 15px;
}
.leftpart {
margin-left: 15px;
width: 48%;
}
.rightpart {
margin-right: 15px;
width: 48%;
}
}
#media (max-width: 980px) {
.serviceslist .mobiledesc {
display: block;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
display: none;
}
}
#media (max-width: 960px) {
}
#media (max-width: 780px) {
.blogarchive article.post {
margin-right: 5px;
}
.gallerypage .galleryitems .galitem .imagegally .mask2 .gallydate {
display: none;
}
.contacttop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.contacttop .rightpart {
width: 100%;
float: none;
}
.abouttwotop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.abouttwotop .rightpart {
width: 100%;
float: none;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 50%;
}
.singleblog .slidergallery .sliderbox {
height: 500px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 500px;
}
}
#media (max-width: 640px) {
.rightsidebar,
.leftsidebar {
display: none;
}
.rightsidebaron,
.leftsidebaron {
margin-right: 0;
margin-left: 0;
}
.wrapper .subtitle {
line-height: 26px;
}
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
height: auto;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
height: auto;
padding-bottom: 20px;
padding-top: 10px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before {
content: attr(data-title);
}
.singleblog .slidergallery .sliderbox {
height: 400px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 400px;
}
.serviceslist .titleservice {
font-size: 20px;
}
}
#media (max-width: 480px) {
header#top .logo {
width: 280px;
margin: 0 auto;
margin-top: 130px;
}
header#top .headertext {
width: 320px;
margin: 0 auto;
margin-top: 35px;
}
header#top a.gobot {
margin: 0 auto;
margin-top: 65px;
}
.teamlist li:nth-child(3n+3) {
margin: 0 auto;
margin-bottom: 40px!important;
}
.teamlist li {
max-width: 295px;
width: 100%;
float: none;
margin: 0 auto;
margin-bottom: 40px!important;
}
footer#footer-main p.copy {
display: block;
width: 100%;
text-align: center;
margin-bottom: 5px;
float: none;
}
footer#footer-main div.socialprof {
display: block;
width: 100%;
float: none;
text-align: center;
}
.blogarchive article.post {
width: 99%;
float: none;
}
.commentform section.comments {
width: 100%;
float: none;
margin-bottom: 30px;
}
.commentform section.respond {
width: 92%;
float: none;
}
.commentform section.comments .scrollbox {
width: 100%;
}
.contactleft,
.leftpart {
width: 90%;
margin-left: 15px;
float: none;
margin-bottom: 40px;
}
.contactright,
.rightpart {
width: 90%;
float: none;
margin-left: 15px;
}
.teamlist {
width: 90%;
overflow: hidden;
}
.wrapper {
overflow: hidden;
}
nav#mobilenav select {
width: 40%;
font-size: 16px;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 100%;
}
.opentime .timelineopening li {
float: none;
}
.opentime .timelineopening {
text-align: center;
}
.singleblog .slidergallery .sliderbox {
height: 300px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 300px;
}
.serviceslist .titleservice {
font-size: 18px;
}
}
#media (max-width: 380px) {
.singleblog .slidergallery .sliderbox {
height: 200px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 200px;
}
.serviceslist .titleservice {
font-size: 16px;
}
}

You have to check your responsive css file queries it will be look like that:
#media only screen and (max-width: 767px) {
//your code
}
Just check it. Sometimes its given in theme's options to display content or hide them.

5 Equal Columns on Skeleton Base Grid 1200

I would like to add the option of 5 equal columns added to my existing grid.
As far as I understand from a previous question on stackoverflow here I need to add the following line to a 960 grid:
.container .one-fifth.column { width: 137.6px; }
You can see in my sample below that my grid consists:
#Base 1200 Grid
#960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
What I need help with is what { width: ???px; } for a 1200 grid and what width for each of the media queries after adding the line .container .one-fifth.column
Any help would be greatly appreciated - Thanks in advance.
Existing Grid CSS:
/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/
/* Table of Contents
==================================================
#Base 1200 Grid
#960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 1200 Grid
================================================== */
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 55px; }
.container .two.columns { width: 130px; }
.container .three.columns { width: 205px; }
.container .four.columns { width: 280px; }
.container .five.columns { width: 355px; }
.container .six.columns { width: 430px; }
.container .seven.columns { width: 505px; }
.container .eight.columns { width: 580px; }
.container .nine.columns { width: 655px; }
.container .ten.columns { width: 730px; }
.container .eleven.columns { width: 805px; }
.container .twelve.columns { width: 880px; }
.container .thirteen.columns { width: 955px; }
.container .fourteen.columns { width: 1030px; }
.container .fifteen.columns { width: 1105px; }
.container .sixteen.columns { width: 1180px; }
.container .one-third.column { width: 380px; }
.container .two-thirds.column { width: 400px; }
/* Offsets */
.container .offset-by-one { padding-left: 75px; }
.container .offset-by-two { padding-left: 150px; }
.container .offset-by-three { padding-left: 225px; }
.container .offset-by-four { padding-left: 300px; }
.container .offset-by-five { padding-left: 375px; }
.container .offset-by-six { padding-left: 450px; }
.container .offset-by-seven { padding-left: 525px; }
.container .offset-by-eight { padding-left: 600px; }
.container .offset-by-nine { padding-left: 675px; }
.container .offset-by-ten { padding-left: 750px; }
.container .offset-by-eleven { padding-left: 825px; }
.container .offset-by-twelve { padding-left: 900px; }
.container .offset-by-thirteen { padding-left: 975px; }
.container .offset-by-fourteen { padding-left: 1050px; }
.container .offset-by-fifteen { padding-left: 1125px; }
/* #960 Grid
================================================== */
/* Note: Design for a width of 960px */
#media only screen and (min-width: 960px) and (max-width: 1199px) {
.container {
position: relative;
width: 1200px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
#media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

For 1200 grid
.container .one-fifth.column { width: 220px; }
.container .two-fifths.column { width: 420px; }
.container .three-fifths.column { width: 640px; }
.container .four-fifths.column { width: 760px; }
For 960 grid
.container .one-fifth.column { width: 172px; }
.container .two-fifths.column { width: 364px; }
.container .three-fifths.column { width: 556px; }
.container .four-fifths.column { width: 748px; }
Tablet (Portrait)
.container .one-fifth.column { width: 133.6px; }
.container .two-fifths.column { width: 287.2px; }
.container .three-fifths.column { width: 440.8px; }
.container .four-fifths.column { width: 594.4px; }
Mobile (Portrait)
.container .one-fifth.column,
.container .two-fifths.column,
.container .three-fifths.column,
.container .four-fifths.column { width: 300px; }

bootstrap - gutterless span, responsive

fiends. I am stucked in bootstrap grid.
As we know bootstap adds some margin to its .span *, so, I need to remove that margin for showing multiple span without adding any row.
I have generated my css from twitter bootstrap customized download. And I have st the gutter to 0 so that no margin should be added to span*.
But It is not working in responsive mode. Please help me to add responsive feature to below code:
.no-gutter.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.no-gutter.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 0%;
}
.no-gutter.row-fluid .span12 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.no-gutter.row-fluid .span11 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.no-gutter.row-fluid .span10 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.no-gutter.row-fluid .span9 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.no-gutter.row-fluid .span8 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.no-gutter.row-fluid .span7 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.no-gutter.row-fluid .span6 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.no-gutter.row-fluid .span5 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.no-gutter.row-fluid .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.no-gutter.row-fluid .span3 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.no-gutter.row-fluid .span2 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.no-gutter.row-fluid .span1 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
.no-gutter.row-fluid .offset12 {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset12:first-child {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset11 {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset11:first-child {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset10 {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset10:first-child {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset9 {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset9:first-child {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset8 {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset8:first-child {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset7 {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset7:first-child {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset6 {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset6:first-child {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset5 {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset5:first-child {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset4 {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset4:first-child {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset3 {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset3:first-child {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset2 {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset2:first-child {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset1 {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
.no-gutter.row-fluid .offset1:first-child {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}

Wouldn't you need to do...
.no-gutter.row-fluid [class*="span"] {
margin-left: 0;
}
Instead of just..
.no-gutter.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
Demo

Resources