Bootstrap is very well known and I think most popular CSS Framework in current web industry. I loved it because of, not only its code simplicity also bootstrap community is so strong rather than Foundation-Zurb or Kube. If you are familiar with Bootstrap current version which is 3.31 than this post is for you and I assure you, Bootstrap document never mention this sh!t again.
Case 01
what do you do if need horizontal(Left-Right) margin in each columns?
What is the problem if, you add margin in each individual columns? Problem is when columns go in different devices application must be broken. Do you ever face this problem?
Simple solution is never give any horizontal margin between each columns. Just wrap your content(img/text) by suppose, div class name content-container then wrap the content-container by the column. Give a padding in content div. Padding will separate content to column also column to column.
Case 02
If you need increase gutter spacing,suppose you assume that content is too big and need space? It is very common and regular problem ?
Just add style in your custom Stylesheet:
Case 01
what do you do if need horizontal(Left-Right) margin in each columns?
What is the problem if, you add margin in each individual columns? Problem is when columns go in different devices application must be broken. Do you ever face this problem?
Simple solution is never give any horizontal margin between each columns. Just wrap your content(img/text) by suppose, div class name content-container then wrap the content-container by the column. Give a padding in content div. Padding will separate content to column also column to column.
Case 02
If you need increase gutter spacing,suppose you assume that content is too big and need space? It is very common and regular problem ?
Just add style in your custom Stylesheet:
.row.no-gutter{
margin-right:0;
margin-left:0
}//*you remove the negative margin*
.row.no-gutter[class*='col-']:not(:first-child),
.row.no-gutter[class*='col-']:not(:last-child){
padding-left:0;
padding-right:0
}//*increase 30px spacing without brake the bootstrap framework*
Happy Coding
No comments:
Post a Comment