LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  
    
    
    
    
    
    

Resizing Bootstrap's Gutter

A simple method of changing bootstrap's default gutter size.
The resizing classes are displayed at the bottom. For a full explanation you can read this article

Gutter size: 30px
CSS
/* Styles */
.pcolor {
  color: #27A2D5;
}
.top-nav {
  border:none;
}
.top-nav.navbar .navbar-brand  {
  background:url(http://arnique.net/demos/assets/logo-icon.png) 15px center no-repeat;
  padding-left: 55px;
  color: #fff;
}
.top-nav .navbar-right li {
  border-left:1px solid rgba(255,255,255,0.1);
}
.top-nav .navbar-nav .marked > a {
  background:#27A2D5;
  color: #fff;
}
body {
  font: 15px  "Roboto Condensed", Arial, sans-serif;
  line-height: 1.7em;
  color: #888; 
  background: #fff;
}

h1, h2 {
  color: #333;
}

footer {
  text-align:center;
  margin:60px auto 0 auto;
  padding:20px 0;
  border-top: 1px solid #ddd;
}
.content {
  max-width:750px;
}

header {
  text-align:center;
  margin:60px 0;
}

#slider {
  width: 400px;
  margin:15px auto 0 auto;
}

#val {
  color: #C21D2E;
  font-weight:bold;
}

.live-gutter >div:after {
  content: "";
  background: #ddd;
  height:150px;
  width:100%;
  display: block;
}

#css-box{
  width:100%;
  padding: 20px;
  border: 2px solid #ddd;
  height:300px;
  margin:30px 0;
}
JS
    $().ready(function() {
      var $liveStyle = $("#live-style"); // Refers to a