Select Page

Reset Bootstrap Padding/Margins for Theming

I use Twitter Bootstrap as a base theme for most of my sites in Drupal.  There are a ton of build in features that make theming a quick and enjoyable process.  One thing that bugs me is the default padding and margin settings.  They are a headache to deal with so here is a CSS reset to remove some of the more annoying settings.

Place this at the start of your custom CSS file and set your own padding/margins!

html,body {
  height: 100%; margin: 0px; padding: 0px; }

#navbar {
  margin-bottom:0; }

.alert {
  border-radius: 0; }

.container {
  width:100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; }

.col-xs-1, .col-sm-1, .col-md-1, .col-sm-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-sm-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-sm-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-sm-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-sm-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-sm-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-sm-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-sm-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-sm-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-sm-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-sm-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-sm-12 {
  position: relative;
  height:100%;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0; }

.row {
  margin-right: 0;
  margin-left: 0; }

.footer {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none; }

.panel {
  border:none; }