List of popular web-frameworks (frontend-frameworks)

Bootstrap info:

Breakpoints: [xs] 768px [sm] 992px [md] 1200px [lg]

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />

<!-- Optional theme -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet" />

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

helper bootstrap classes:

  • .pull-right {float: right;}
  • .pull-left {float: left;}
  • .center-block {display: block; margin-left: auto; margin-right: auto;}
  • .text-right {text-align: right;}
  • .text-left {text-align: left;}
  • .text-center {text-align: center;}
  • .hidden {display: none !important; visibility: hidden !important;}
  • .show {display: block !important;}
  • .invisible {visibility: hidden;}
  • .affix {position: fixed;}
  • .text-muted {color: #818a91;}
  • .clearfix {/* clearfix style */}

Bootstrap3 uses: -xs- [768px] -sm- [992px] -md- [1200px] -lg-

And Bootstrap4 uses: -xs- [544px] -sm- [768px] -md- [992px] -lg- [1200px] -xl-
Or same but in ems: -xs- [34em] -sm- [48em] -md- [62em] -lg- [75em] -xl-

Note that Bootstrap4 adds new breakpoint -xl- and shift all other breakpoints by adding 544px screen size.

Leave a Comment