├── README.md └── Keywords.md /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap practices 2 | 3 | This document lists down the things I've learned when working on Bootstrap projects. 4 | 5 | > Also see [rscss](http://rscss.io/), a Reasonable system for CSS stylesheet structure, which perfectly complements this document. 6 | 7 |
8 | 9 | ## Including Bootstrap 10 | 11 | - 12 | **Use Sass:** 13 | Avoid the Less version of Bootstrap. Use the officially-supported Sass version. Be aware that Bootstrap's official sources migrated from Less to Sass since version 4. 14 | [#](#use-sass) 15 | 16 | ```rb 17 | gem 'bootstrap-sass' # Rails 18 | bower install bootstrap-sass # elsewhere 19 | ``` 20 | 21 | _See: [@mdo's tweet](https://twitter.com/mdo/status/591364406816079873?lang=en)_ 22 | 23 | - 24 | **Avoid the CDN:** 25 | Don't use the Bootstrap CDN. Any site you build to last will eventually need to grow up to extend Bootstrap. The only legitimate use of this is for quick demos and jsfiddle. 26 | [#](#avoid-the-cdn) 27 | 28 | _See: [Bootstrap CDN][]_ 29 | 30 |
31 | 32 | ## Components 33 | 34 | - 35 | **Graduate:** 36 | Your objective is to eventually graduate from stock components into new ones. Instead of restyling stock components, consider creating new ones instead. 37 | [#](#graduate) 38 | 39 | ```scss 40 | // ✗ Avoid (avoid restyling stock components) 41 | .jumbotron { 42 | background: url('....'); 43 | } 44 | 45 | // ✓ OK 46 | .new-jumbotron { 47 | background: url('....'); 48 | } 49 | ``` 50 | 51 | - 52 | **Restyling stock components:** Don't restyle stock components except `.btn` and `.form-control`. Everything else are too complicated to restyle (eg, navbars and tables). The stock components account for a lot of corner cases, and working around them is more effort than its worth. 53 | [#](#restyling-stock-components) 54 | 55 | ```scss 56 | // ✗ Avoid. You don't want to do this. 57 | .nav-bar { 58 | background: $gray; 59 | ... 60 | } 61 | ``` 62 | 63 | - 64 | **Bootstrap's modularity:** 65 | Bootstrap's modules were made to be completely separate: grids, icons, components, JS components. This means you can mix and match them: 66 | [#](#bootstraps-modularity) 67 | 68 | - You don't need to use all the CSS components. 69 | - You can use different icons. 70 | - You can use a different grid system. 71 | 72 | Here are some examples of alternate systems you can use: 73 | 74 | - Grids: [Jeet](http://jeet.gs/), [Neat](http://neat.bourbon.io/) 75 | - Icons: [Ionicons](http://ionicons.com/), [Font Awesome](https://fortawesome.github.io/Font-Awesome/) 76 | 77 | The recommended setup is to use Bootstrap for grids, basic components, JS, and nothing else (eg, icons, stock components). 78 | 79 |
80 | 81 | ## CSS 82 | 83 | - 84 | **Restyling bare elements:** 85 | Avoid style bare elements like h2, h3, and so on, with anything other than fonts & margins. If you need control on the styles to display documents (like Markdown descriptions), create a prefixed component. This will prevent creeping of your own rules into components that rely on these elements to have default styling. 86 | [#](#restyling-bare-elements) 87 | 88 | 89 | 90 | ```scss 91 | // ✗ Avoid: borders will show up everywhere! 92 | h2 { 93 | margin-top: 3em; 94 | border-bottom: solid 1px #ddd; 95 | } 96 | 97 | // ✓ Better 98 | .formatted-text { 99 | h2 { 100 | margin-top: 3em; 101 | border-bottom: solid 1px #ddd; 102 | } 103 | } 104 | ``` 105 | 106 | - 107 | **Be selective:** 108 | Try not to use everything in Bootstrap. Take _\_bootstrap.scss_ and start with the bare minimum your project will need. Comment out everything else. 109 | [#](#be-selective) 110 | 111 | ```scss 112 | // Core variables and mixins 113 | @import 'bootstrap/variables'; 114 | @import 'bootstrap/mixins'; 115 | 116 | // Reset and dependencies 117 | @import 'bootstrap/normalize'; 118 | @import 'bootstrap/print'; 119 | // @import "bootstrap/glyphicons"; 120 | 121 | // Core CSS 122 | @import 'bootstrap/scaffolding'; 123 | @import 'bootstrap/type'; 124 | @import 'bootstrap/code'; 125 | @import 'bootstrap/grid'; 126 | @import 'bootstrap/tables'; 127 | @import 'bootstrap/forms'; 128 | @import 'bootstrap/buttons'; 129 | 130 | // (...snip...) 131 | 132 | // Utility classes 133 | @import 'bootstrap/utilities'; 134 | @import 'bootstrap/responsive-utilities'; 135 | ``` 136 | 137 | _See: [\_bootstrap.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss)_ 138 | 139 | - 140 | **Media queries:** 141 | Use Bootstrap variables for media queries. This will make your breakpoints consistent with where the Bootstrap columns will break. 142 | [#](#media-queries) 143 | 144 | ```css 145 | @media (min-width: $screen-md-min) { 146 | } 147 | ``` 148 | 149 | - 150 | **Variable overrides:** 151 | Always override the following variables. Refer to Bootstrap's _variables.scss_ for things you can (should) reconfigure. 152 | [#](#variable-overrides) 153 | 154 | ```scss 155 | // fonts 156 | $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; 157 | $font-size-base: 14px; 158 | $line-height-base: 1.42857; 159 | $headings-font-weight: 500; 160 | 161 | // colors 162 | $brand-primary: #337ab7; // your main color 163 | $brand-success: #5cb85c; // green 164 | $brand-info: #5bc0de; // blue 165 | $brand-warning: #f0ad4e; // yellow 166 | $brand-danger: #d9534f; // red 167 | 168 | $gray-light: #777777; // muted text 169 | $gray-lighter: #dddddd; // lines 170 | ``` 171 | 172 | _See: [variables.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss), [colors variables](http://getbootstrap.com/css/#less-variables-colors), [typography variables](http://getbootstrap.com/css/#less-variables-typography)_ 173 | 174 | - 175 | **Use Autoprefixer**: 176 | Use Autoprefixer instead of Bootstrap's CSS3 mixins. Autoprefixer has been endorsed officially as of Bootstrap 3.3. 177 | 178 | ```scss 179 | // ✗ Avoid 180 | .my-component { 181 | @include box-shadow(0 1px 4px black); 182 | } 183 | 184 | // ✓ OK 185 | .my-component { 186 | box-shadow: 0 1px 4px black; 187 | } 188 | ``` 189 | 190 | _See: [Autoprefixer][], [Less mixins](http://getbootstrap.com/css/#less-mixins-vendor)_ 191 | 192 |
193 | 194 | ## Naming 195 | 196 | - 197 | **Naming conventions:** 198 | When creating new components, there's no reason to stick to Bootstrap's naming convention. Consider rscss or BEM instead. 199 | [#](#naming-conventions) 200 | 201 | ```scss 202 | // ✗ No need to follow bootstrap conventions like .panel-body (elements) or .btn-primary (modifiers) 203 | .eventlist { ... } 204 | .eventlist-expanded { ... } 205 | .eventlist-heading { ... } 206 | .eventlist-item { ... } 207 | 208 | // ✓ Better: rscss conventions are cleaner 209 | .event-list { 210 | &.-expanded { ... } 211 | .heading { ... } 212 | .item { ...} 213 | } 214 | ``` 215 | 216 | _See: [rscss], [BEM]_ 217 | 218 | - 219 | **Reserved keywords:** 220 | Avoid using the following classnames when making new components. They are defined as top-level classes in Bootstrap and may produce conflicts. This is a partial list of the most common ones, check the full list below. 221 | [#](#reserved-keywords) 222 | 223 | > alert[\*](http://getbootstrap.com/components/#alerts), 224 | > breadcrumb[\*](http://getbootstrap.com/components/#breadcrumbs), 225 | > close[\*](http://getbootstrap.com/css/#helper-classes-close), 226 | > label[\*](http://getbootstrap.com/components/#labels), 227 | > mark, 228 | > open, 229 | > small, 230 | > badge[\*](http://getbootstrap.com/components/#badges) 231 | 232 | _See: [list of Bootstrap keywords](Keywords.md)_ 233 | 234 |
235 | 236 | ## Markup 237 | 238 | - 239 | **Avoid helpers:** 240 | Avoid using helper classes like `.pull-left` or `.text-right`. Consider the use of these as code smell anti-patterns: anytime they appear in your code, it's a wise time to evaluate if they should be refactored into new components instead. 241 | 242 | ```html 243 | 244 |
245 |
246 |

John Smith

247 |

The doctor

248 |
249 |
250 | Picture 251 |
252 |
253 | ``` 254 | 255 | ```scss 256 | /* ✓ Better: use components */ 257 | /* (this example uses rscss conventions.) */ 258 | .profile-card { 259 | & { 260 | @include clearfix; 261 | } 262 | > .info { 263 | float: left; 264 | } 265 | > .info > .name { 266 | text-align: center; 267 | } 268 | > .info > .occupation { 269 | text-align: center; 270 | font-size: 0.8em; 271 | } 272 | > .avatar { 273 | float: right; 274 | } 275 | } 276 | ``` 277 | 278 |
279 | 280 | ## Grids 281 | 282 | - 283 | **Column mixins:** 284 | Use column mixins when necessary. This will free your markup from unsemantic grid classes. 285 | 286 | ```scss 287 | .dashboard-layout { 288 | & { 289 | @include make-row(); 290 | } 291 | > .content { 292 | @include make-lg-column(8); 293 | } 294 | > .sidebar { 295 | @include make-lg-column(3); 296 | @include make-lg-column-offset(1); 297 | } 298 | } 299 | ``` 300 | 301 | _See: [Less grids reference](http://getbootstrap.com/css/#grid-less)_ 302 | 303 | - 304 | **Grid classes:** 305 | Grid classes are okay to use in your markup. However, if they appear too often, consider making them a CSS component instead. 306 | 307 | Grid CSS classes include: `.container`, `.container-fluid`, `.row`, `.col-sm-6`. 308 | 309 | ```scss 310 | .field-row { 311 | & { 312 | @include make-row(); 313 | } 314 | > .label { 315 | @include make-lg-column(4); 316 | } 317 | > .control { 318 | @include make-lg-column(8); 319 | } 320 | } 321 | ``` 322 | 323 | _See: [Less grids reference](http://getbootstrap.com/css/#grid-less)_ 324 | 325 |
326 | 327 | ## Icons 328 | 329 | - **Avoid Glyphicons:** They're too bland of a default, so chances are you designer wouldn't wanna use them anyway. If they do, fire them. 330 | 331 | ```scss 332 | // @import "bootstrap/glyphicons"; 333 | ``` 334 | 335 | - **Attribute Glyphicons**: If you do end up using Glyphicons, be aware that you are required to give attribution. 336 | 337 | ```html 338 | Icons by Glyphicons. 339 | ``` 340 | 341 | _See: [reference](http://getbootstrap.com/components/#glyphicons-glyphs)_ 342 | 343 |
344 | 345 | ## Forms 346 | 347 | - **Make your own form components**: The Bootstrap docs prescribe you to use `.col-md-6` (and so on) to line up your forms. It's better to create your own components. 348 | 349 | ```html 350 |
351 | 352 |
353 | 354 |
355 |
356 | ``` 357 | 358 | ```css 359 | .form-field { 360 | & { 361 | @include clearfix; 362 | } 363 | > .lbl { 364 | width: 30%; 365 | float: left; 366 | } 367 | > .controls { 368 | width: 70%; 369 | float: left; 370 | } 371 | } 372 | /* We're using `lbl` instead of `label` because `label` is a reserved Bootstrap keyword :( */ 373 | ``` 374 | 375 | [rscss]: https://github.com/rstacruz/rscss 376 | [bem]: http://bem.info/ 377 | [autoprefixer]: https://github.com/postcss/autoprefixer 378 | [bootstrap cdn]: http://www.bootstrapcdn.com/ 379 | -------------------------------------------------------------------------------- /Keywords.md: -------------------------------------------------------------------------------- 1 | # List of bootstrap keywords 2 | 3 | Generated from bootstrap-sass 3.3.4.1. 4 | 5 | ### Classes (1 word) 6 | 7 | - .active 8 | - .affix 9 | - .alert 10 | - .badge 11 | - .breadcrumb 12 | - .btn 13 | - .caption 14 | - .caret 15 | - .carousel 16 | - .checkbox 17 | - .clearfix 18 | - .close 19 | - .collapse 20 | - .collapsing 21 | - .container 22 | - .disabled 23 | - .divider 24 | - .dropdown 25 | - .dropup 26 | - .fade 27 | - .glyphicon 28 | - .h1 29 | - .hidden 30 | - .hide 31 | - .initialism 32 | - .invisible 33 | - .jumbotron 34 | - .label 35 | - .lead 36 | - .mark 37 | - .media 38 | - .modal 39 | - .nav 40 | - .navbar 41 | - .next 42 | - .open 43 | - .pager 44 | - .pagination 45 | - .panel 46 | - .popover 47 | - .previous 48 | - .progress 49 | - .radio 50 | - .row 51 | - .show 52 | - .small 53 | - .table 54 | - .thumbnail 55 | - .tooltip 56 | - .well 57 | 58 | ### Classes (2+ words) 59 | 60 | - .alert-danger 61 | - .alert-dismissible 62 | - .alert-info 63 | - .alert-link 64 | - .alert-success 65 | - .alert-warning 66 | - .bg-primary 67 | - .btn-block 68 | - .btn-danger 69 | - .btn-default 70 | - .btn-group 71 | - .btn-group-justified 72 | - .btn-group-lg 73 | - .btn-group-sm 74 | - .btn-group-vertical 75 | - .btn-group-xs 76 | - .btn-info 77 | - .btn-lg 78 | - .btn-link 79 | - .btn-primary 80 | - .btn-sm 81 | - .btn-success 82 | - .btn-toolbar 83 | - .btn-warning 84 | - .btn-xs 85 | - .carousel-caption 86 | - .carousel-control 87 | - .carousel-indicators 88 | - .carousel-inner 89 | - .center-block 90 | - .checkbox-inline 91 | - .container-fluid 92 | - .control-label 93 | - .dl-horizontal 94 | - .dropdown-backdrop 95 | - .dropdown-header 96 | - .dropdown-menu 97 | - .dropdown-menu-left 98 | - .dropdown-menu-right 99 | - .embed-responsive 100 | - .embed-responsive-16by9 101 | - .embed-responsive-4by3 102 | - .form-control 103 | - .form-control-feedback 104 | - .form-control-static 105 | - .form-group 106 | - .form-group-lg 107 | - .form-group-sm 108 | - .form-horizontal 109 | - .form-inline 110 | - .has-error 111 | - .has-feedback 112 | - .has-success 113 | - .has-warning 114 | - .help-block 115 | - .icon-bar 116 | - .icon-next 117 | - .icon-prev 118 | - .img-circle 119 | - .img-responsive 120 | - .img-rounded 121 | - .img-thumbnail 122 | - .input-group 123 | - .input-group-addon 124 | - .input-group-btn 125 | - .input-group-lg 126 | - .input-group-sm 127 | - .input-lg 128 | - .input-sm 129 | - .label-danger 130 | - .label-default 131 | - .label-info 132 | - .label-primary 133 | - .label-success 134 | - .label-warning 135 | - .list-group 136 | - .list-group-item 137 | - .list-group-item-heading 138 | - .list-group-item-text 139 | - .list-inline 140 | - .list-unstyled 141 | - .media-body 142 | - .media-bottom 143 | - .media-heading 144 | - .media-list 145 | - .media-middle 146 | - .media-object 147 | - .modal-backdrop 148 | - .modal-body 149 | - .modal-content 150 | - .modal-dialog 151 | - .modal-footer 152 | - .modal-header 153 | - .modal-lg 154 | - .modal-open 155 | - .modal-scrollbar-measure 156 | - .modal-sm 157 | - .modal-title 158 | - .nav-divider 159 | - .nav-justified 160 | - .nav-pills 161 | - .nav-stacked 162 | - .nav-tabs 163 | - .nav-tabs-justified 164 | - .navbar-brand 165 | - .navbar-btn 166 | - .navbar-collapse 167 | - .navbar-default 168 | - .navbar-fixed-bottom 169 | - .navbar-fixed-top 170 | - .navbar-form 171 | - .navbar-header 172 | - .navbar-inverse 173 | - .navbar-left 174 | - .navbar-link 175 | - .navbar-nav 176 | - .navbar-right 177 | - .navbar-static-top 178 | - .navbar-text 179 | - .navbar-toggle 180 | - .page-header 181 | - .pagination-lg 182 | - .pagination-sm 183 | - .panel-body 184 | - .panel-danger 185 | - .panel-default 186 | - .panel-footer 187 | - .panel-group 188 | - .panel-heading 189 | - .panel-info 190 | - .panel-primary 191 | - .panel-success 192 | - .panel-title 193 | - .panel-warning 194 | - .popover-content 195 | - .popover-title 196 | - .pre-scrollable 197 | - .progress-bar 198 | - .progress-bar-danger 199 | - .progress-bar-info 200 | - .progress-bar-striped 201 | - .progress-bar-success 202 | - .progress-bar-warning 203 | - .progress-striped 204 | - .pull-left 205 | - .pull-right 206 | - .radio-inline 207 | - .sr-only 208 | - .sr-only-focusable 209 | - .tab-content 210 | - .table-bordered 211 | - .table-condensed 212 | - .table-hover 213 | - .table-responsive 214 | - .table-striped 215 | - .text-capitalize 216 | - .text-center 217 | - .text-hide 218 | - .text-justify 219 | - .text-left 220 | - .text-lowercase 221 | - .text-muted 222 | - .text-nowrap 223 | - .text-right 224 | - .text-uppercase 225 | - .tooltip-arrow 226 | - .tooltip-inner 227 | - .visible-lg-block 228 | - .visible-lg-inline 229 | - .visible-lg-inline-block 230 | - .visible-md-block 231 | - .visible-md-inline 232 | - .visible-md-inline-block 233 | - .visible-print-block 234 | - .visible-print-inline 235 | - .visible-print-inline-block 236 | - .visible-sm-block 237 | - .visible-sm-inline 238 | - .visible-sm-inline-block 239 | - .visible-xs-block 240 | - .visible-xs-inline 241 | - .visible-xs-inline-block 242 | - .well-lg 243 | - .well-sm 244 | 245 | ### Variables 246 | 247 | - $abbr-border-color 248 | - $alert-border-radius 249 | - $alert-danger-bg 250 | - $alert-danger-border 251 | - $alert-danger-text 252 | - $alert-info-bg 253 | - $alert-info-border 254 | - $alert-info-text 255 | - $alert-link-font-weight 256 | - $alert-padding 257 | - $alert-success-bg 258 | - $alert-success-border 259 | - $alert-success-text 260 | - $alert-warning-bg 261 | - $alert-warning-border 262 | - $alert-warning-text 263 | - $badge-active-bg 264 | - $badge-active-color 265 | - $badge-bg 266 | - $badge-border-radius 267 | - $badge-color 268 | - $badge-font-weight 269 | - $badge-line-height 270 | - $badge-link-hover-color 271 | - $blockquote-border-color 272 | - $blockquote-font-size 273 | - $blockquote-small-color 274 | - $body-bg 275 | - $bootstrap-sass-asset-helper 276 | - $border-radius-base 277 | - $border-radius-large 278 | - $border-radius-small 279 | - $brand-danger 280 | - $brand-info 281 | - $brand-primary 282 | - $brand-success 283 | - $brand-warning 284 | - $breadcrumb-active-color 285 | - $breadcrumb-bg 286 | - $breadcrumb-color 287 | - $breadcrumb-padding-horizontal 288 | - $breadcrumb-padding-vertical 289 | - $breadcrumb-separator 290 | - $btn-danger-bg 291 | - $btn-danger-border 292 | - $btn-danger-color 293 | - $btn-default-bg 294 | - $btn-default-border 295 | - $btn-default-color 296 | - $btn-font-weight 297 | - $btn-info-bg 298 | - $btn-info-border 299 | - $btn-info-color 300 | - $btn-link-disabled-color 301 | - $btn-primary-bg 302 | - $btn-primary-border 303 | - $btn-primary-color 304 | - $btn-success-bg 305 | - $btn-success-border 306 | - $btn-success-color 307 | - $btn-warning-bg 308 | - $btn-warning-border 309 | - $btn-warning-color 310 | - $caret-width-base 311 | - $caret-width-large 312 | - $carousel-caption-color 313 | - $carousel-control-color 314 | - $carousel-control-font-size 315 | - $carousel-control-opacity 316 | - $carousel-control-width 317 | - $carousel-indicator-active-bg 318 | - $carousel-indicator-border-color 319 | - $carousel-text-shadow 320 | - $close-color 321 | - $close-font-weight 322 | - $close-text-shadow 323 | - $code-bg 324 | - $code-color 325 | - $component-active-bg 326 | - $component-active-color 327 | - $component-offset-horizontal 328 | - $container-desktop 329 | - $container-large-desktop 330 | - $container-lg 331 | - $container-md 332 | - $container-sm 333 | - $container-tablet 334 | - $cursor-disabled 335 | - $dl-horizontal-offset 336 | - $dropdown-bg 337 | - $dropdown-border 338 | - $dropdown-caret-color 339 | - $dropdown-divider-bg 340 | - $dropdown-fallback-border 341 | - $dropdown-header-color 342 | - $dropdown-link-active-bg 343 | - $dropdown-link-active-color 344 | - $dropdown-link-color 345 | - $dropdown-link-disabled-color 346 | - $dropdown-link-hover-bg 347 | - $dropdown-link-hover-color 348 | - $font-family-base 349 | - $font-family-monospace 350 | - $font-family-sans-serif 351 | - $font-family-serif 352 | - $font-size-base 353 | - $font-size-h1 354 | - $font-size-h2 355 | - $font-size-h3 356 | - $font-size-h4 357 | - $font-size-h5 358 | - $font-size-h6 359 | - $font-size-large 360 | - $font-size-small 361 | - $form-group-margin-bottom 362 | - $gray 363 | - $gray-base 364 | - $gray-dark 365 | - $gray-darker 366 | - $gray-light 367 | - $gray-lighter 368 | - $grid-columns 369 | - $grid-float-breakpoint 370 | - $grid-float-breakpoint-max 371 | - $grid-gutter-width 372 | - $headings-color 373 | - $headings-font-family 374 | - $headings-font-weight 375 | - $headings-line-height 376 | - $headings-small-color 377 | - $hr-border 378 | - $icon-font-name 379 | - $icon-font-path 380 | - $icon-font-svg-id 381 | - $input-bg 382 | - $input-bg-disabled 383 | - $input-border 384 | - $input-border-focus 385 | - $input-border-radius 386 | - $input-border-radius-large 387 | - $input-border-radius-small 388 | - $input-color 389 | - $input-color-placeholder 390 | - $input-group-addon-bg 391 | - $input-group-addon-border-color 392 | - $input-height-base 393 | - $input-height-large 394 | - $input-height-small 395 | - $jumbotron-bg 396 | - $jumbotron-color 397 | - $jumbotron-font-size 398 | - $jumbotron-heading-color 399 | - $jumbotron-padding 400 | - $kbd-bg 401 | - $kbd-color 402 | - $label-color 403 | - $label-danger-bg 404 | - $label-default-bg 405 | - $label-info-bg 406 | - $label-link-hover-color 407 | - $label-primary-bg 408 | - $label-success-bg 409 | - $label-warning-bg 410 | - $legend-border-color 411 | - $legend-color 412 | - $line-height-base 413 | - $line-height-computed 414 | - $line-height-large 415 | - $line-height-small 416 | - $link-color 417 | - $link-hover-color 418 | - $link-hover-decoration 419 | - $list-group-active-bg 420 | - $list-group-active-border 421 | - $list-group-active-color 422 | - $list-group-active-text-color 423 | - $list-group-bg 424 | - $list-group-border 425 | - $list-group-border-radius 426 | - $list-group-disabled-bg 427 | - $list-group-disabled-color 428 | - $list-group-disabled-text-color 429 | - $list-group-hover-bg 430 | - $list-group-link-color 431 | - $list-group-link-heading-color 432 | - $list-group-link-hover-color 433 | - $modal-backdrop-bg 434 | - $modal-backdrop-opacity 435 | - $modal-content-bg 436 | - $modal-content-border-color 437 | - $modal-content-fallback-border-color 438 | - $modal-footer-border-color 439 | - $modal-header-border-color 440 | - $modal-inner-padding 441 | - $modal-lg 442 | - $modal-md 443 | - $modal-sm 444 | - $modal-title-line-height 445 | - $modal-title-padding 446 | - $nav-disabled-link-color 447 | - $nav-disabled-link-hover-color 448 | - $nav-link-hover-bg 449 | - $nav-link-padding 450 | - $nav-pills-active-link-hover-bg 451 | - $nav-pills-active-link-hover-color 452 | - $nav-pills-border-radius 453 | - $nav-tabs-active-link-hover-bg 454 | - $nav-tabs-active-link-hover-border-color 455 | - $nav-tabs-active-link-hover-color 456 | - $nav-tabs-border-color 457 | - $nav-tabs-justified-active-link-border-color 458 | - $nav-tabs-justified-link-border-color 459 | - $nav-tabs-link-hover-border-color 460 | - $navbar-border-radius 461 | - $navbar-collapse-max-height 462 | - $navbar-default-bg 463 | - $navbar-default-border 464 | - $navbar-default-brand-color 465 | - $navbar-default-brand-hover-bg 466 | - $navbar-default-brand-hover-color 467 | - $navbar-default-color 468 | - $navbar-default-link-active-bg 469 | - $navbar-default-link-active-color 470 | - $navbar-default-link-color 471 | - $navbar-default-link-disabled-bg 472 | - $navbar-default-link-disabled-color 473 | - $navbar-default-link-hover-bg 474 | - $navbar-default-link-hover-color 475 | - $navbar-default-toggle-border-color 476 | - $navbar-default-toggle-hover-bg 477 | - $navbar-default-toggle-icon-bar-bg 478 | - $navbar-height 479 | - $navbar-inverse-bg 480 | - $navbar-inverse-border 481 | - $navbar-inverse-brand-color 482 | - $navbar-inverse-brand-hover-bg 483 | - $navbar-inverse-brand-hover-color 484 | - $navbar-inverse-color 485 | - $navbar-inverse-link-active-bg 486 | - $navbar-inverse-link-active-color 487 | - $navbar-inverse-link-color 488 | - $navbar-inverse-link-disabled-bg 489 | - $navbar-inverse-link-disabled-color 490 | - $navbar-inverse-link-hover-bg 491 | - $navbar-inverse-link-hover-color 492 | - $navbar-inverse-toggle-border-color 493 | - $navbar-inverse-toggle-hover-bg 494 | - $navbar-inverse-toggle-icon-bar-bg 495 | - $navbar-margin-bottom 496 | - $navbar-padding-horizontal 497 | - $navbar-padding-vertical 498 | - $padding-base-horizontal 499 | - $padding-base-vertical 500 | - $padding-large-horizontal 501 | - $padding-large-vertical 502 | - $padding-small-horizontal 503 | - $padding-small-vertical 504 | - $padding-xs-horizontal 505 | - $padding-xs-vertical 506 | - $page-header-border-color 507 | - $pager-active-bg 508 | - $pager-active-color 509 | - $pager-bg 510 | - $pager-border 511 | - $pager-border-radius 512 | - $pager-disabled-color 513 | - $pager-hover-bg 514 | - $pagination-active-bg 515 | - $pagination-active-border 516 | - $pagination-active-color 517 | - $pagination-bg 518 | - $pagination-border 519 | - $pagination-color 520 | - $pagination-disabled-bg 521 | - $pagination-disabled-border 522 | - $pagination-disabled-color 523 | - $pagination-hover-bg 524 | - $pagination-hover-border 525 | - $pagination-hover-color 526 | - $panel-bg 527 | - $panel-body-padding 528 | - $panel-border-radius 529 | - $panel-danger-border 530 | - $panel-danger-heading-bg 531 | - $panel-danger-text 532 | - $panel-default-border 533 | - $panel-default-heading-bg 534 | - $panel-default-text 535 | - $panel-footer-bg 536 | - $panel-footer-padding 537 | - $panel-heading-padding 538 | - $panel-info-border 539 | - $panel-info-heading-bg 540 | - $panel-info-text 541 | - $panel-inner-border 542 | - $panel-primary-border 543 | - $panel-primary-heading-bg 544 | - $panel-primary-text 545 | - $panel-success-border 546 | - $panel-success-heading-bg 547 | - $panel-success-text 548 | - $panel-warning-border 549 | - $panel-warning-heading-bg 550 | - $panel-warning-text 551 | - $popover-arrow-color 552 | - $popover-arrow-outer-color 553 | - $popover-arrow-outer-fallback-color 554 | - $popover-arrow-outer-width 555 | - $popover-arrow-width 556 | - $popover-bg 557 | - $popover-border-color 558 | - $popover-fallback-border-color 559 | - $popover-max-width 560 | - $popover-title-bg 561 | - $pre-bg 562 | - $pre-border-color 563 | - $pre-color 564 | - $pre-scrollable-max-height 565 | - $progress-bar-bg 566 | - $progress-bar-color 567 | - $progress-bar-danger-bg 568 | - $progress-bar-info-bg 569 | - $progress-bar-success-bg 570 | - $progress-bar-warning-bg 571 | - $progress-bg 572 | - $progress-border-radius 573 | - $screen-desktop 574 | - $screen-lg 575 | - $screen-lg-desktop 576 | - $screen-lg-min 577 | - $screen-md 578 | - $screen-md-max 579 | - $screen-md-min 580 | - $screen-phone 581 | - $screen-sm 582 | - $screen-sm-max 583 | - $screen-sm-min 584 | - $screen-tablet 585 | - $screen-xs 586 | - $screen-xs-max 587 | - $screen-xs-min 588 | - $state-danger-bg 589 | - $state-danger-border 590 | - $state-danger-text 591 | - $state-info-bg 592 | - $state-info-border 593 | - $state-info-text 594 | - $state-success-bg 595 | - $state-success-border 596 | - $state-success-text 597 | - $state-warning-bg 598 | - $state-warning-border 599 | - $state-warning-text 600 | - $table-bg 601 | - $table-bg-accent 602 | - $table-bg-active 603 | - $table-bg-hover 604 | - $table-border-color 605 | - $table-cell-padding 606 | - $table-condensed-cell-padding 607 | - $text-color 608 | - $text-muted 609 | - $thumbnail-bg 610 | - $thumbnail-border 611 | - $thumbnail-border-radius 612 | - $thumbnail-caption-color 613 | - $thumbnail-caption-padding 614 | - $thumbnail-padding 615 | - $tooltip-arrow-color 616 | - $tooltip-arrow-width 617 | - $tooltip-bg 618 | - $tooltip-color 619 | - $tooltip-max-width 620 | - $tooltip-opacity 621 | - $well-bg 622 | - $well-border 623 | - $zindex-dropdown 624 | - $zindex-modal 625 | - $zindex-modal-background 626 | - $zindex-navbar 627 | - $zindex-navbar-fixed 628 | - $zindex-popover 629 | - $zindex-tooltip 630 | 631 | ### Mixins 632 | 633 | - alert-styles 634 | - alert-variant 635 | - animation 636 | - animation-delay 637 | - animation-direction 638 | - animation-duration 639 | - animation-fill-mode 640 | - animation-iteration-count 641 | - animation-name 642 | - animation-timing-function 643 | - backface-visibility 644 | - bg-variant 645 | - border-bottom-radius 646 | - border-left-radius 647 | - border-right-radius 648 | - border-top-radius 649 | - box-shadow 650 | - box-sizing 651 | - btn-styles 652 | - button-size 653 | - button-variant 654 | - calc-grid-column 655 | - center-block 656 | - clearfix 657 | - container-fixed 658 | - content-columns 659 | - float-grid-columns 660 | - form-control-focus 661 | - form-control-validation 662 | - form-inline 663 | - gradient-directional 664 | - gradient-horizontal 665 | - gradient-horizontal-three-colors 666 | - gradient-radial 667 | - gradient-striped 668 | - gradient-vertical 669 | - gradient-vertical-three-colors 670 | - hide-text 671 | - hyphens 672 | - img-responsive 673 | - img-retina 674 | - input-size 675 | - label-variant 676 | - list-group-item-variant 677 | - list-unstyled 678 | - loop-grid-columns 679 | - make-grid 680 | - make-grid-columns 681 | - make-lg-column 682 | - make-lg-column-offset 683 | - make-lg-column-pull 684 | - make-lg-column-push 685 | - make-md-column 686 | - make-md-column-offset 687 | - make-md-column-pull 688 | - make-md-column-push 689 | - make-row 690 | - make-sm-column 691 | - make-sm-column-offset 692 | - make-sm-column-pull 693 | - make-sm-column-push 694 | - make-xs-column 695 | - make-xs-column-offset 696 | - make-xs-column-pull 697 | - make-xs-column-push 698 | - nav-divider 699 | - navbar-vertical-align 700 | - opacity 701 | - pagination-size 702 | - panel-heading-styles 703 | - panel-variant 704 | - perspective 705 | - perspective-origin 706 | - placeholder 707 | - progress-bar-styles 708 | - progress-bar-variant 709 | - reset-filter 710 | - resizable 711 | - responsive-invisibility 712 | - responsive-visibility 713 | - rotate 714 | - rotateX 715 | - rotateY 716 | - scale 717 | - scaleX 718 | - scaleY 719 | - size 720 | - skew 721 | - square 722 | - tab-focus 723 | - table-row-variant 724 | - text-emphasis-variant 725 | - text-hide 726 | - text-overflow 727 | - transform-origin 728 | - transition 729 | - transition-delay 730 | - transition-duration 731 | - transition-property 732 | - transition-timing-function 733 | - transition-transform 734 | - translate 735 | - translate3d 736 | - user-select 737 | --------------------------------------------------------------------------------