web-framework

List of popular web-frameworks (frontend-frameworks)

• Bootstrap (160k stars on Github)
• Tailwind CSS (60k stars on Github)
• Semantic UI (50k stars on Github)
• Bulma (46k stars on Github)
• Foundation (30k stars on Github)
• UIkit (20k stars on Github)
• Flexify (Github)

Bootstrap info:

• bootstrap - web-framework
• bootstrap on github - css and html framework
• bootstrap expo
• bootstrap cdn

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 */}

• Design elements, playground and code snippets for bootstrap
• Free Bootstrap Themes & Templates
• Bootstrap themes, snippets & components

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.