<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> About · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/about/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=history>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on Friday, August 19, 2011, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=team>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a href=https://github.com/mdo class=team-member> <img alt="@mdo avatar" height=32 src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" width=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a href=https://github.com/fat class=team-member> <img alt="@fat avatar" height=32 src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" width=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a href=https://github.com/cvrebert class=team-member> <img alt="@cvrebert avatar" height=32 src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" width=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a href=https://github.com/juthilo class=team-member> <img alt="@juthilo avatar" height=32 src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" width=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a href=https://github.com/xhmikosr class=team-member> <img alt="@xhmikosr avatar" height=32 src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" width=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a href=https://github.com/hnrch02 class=team-member> <img alt="@hnrch02 avatar" height=32 src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" width=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a href=https://github.com/patrickhlauke class=team-member> <img alt="@patrickhlauke avatar" height=32 src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" width=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a href=https://github.com/thomas-mcdonald class=team-member> <img alt="@thomas-mcdonald avatar" height=32 src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" width=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a href=https://github.com/glebm class=team-member> <img alt="@glebm avatar" height=32 src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" width=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=brand>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ rel=noopener target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-solid.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-outline.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-punchout.svg width=144 class=svg> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> About · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/about/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>About</h1> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=history>History</h1> <p class=lead>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href=https://twitter.com/mdo>@mdo</a> and <a href=https://twitter.com/fat>@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href=https://blog.twitter.com/2010/hack-week>first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Originally <a href=https://blog.twitter.com/2011/bootstrap-twitter>released</a> on Friday, August 19, 2011, we've since had over <a href=https://github.com/twbs/bootstrap/releases>twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=team>Team</h1> <p class=lead>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p> <h2 id=team-core>Core team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> <a href=https://github.com/mdo class=team-member> <img alt="@mdo avatar" height=32 src="https://secure.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c.jpg?s=32" width=32> <strong>Mark Otto</strong> <small>@mdo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe> <a href=https://github.com/fat class=team-member> <img alt="@fat avatar" height=32 src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8.jpg?s=32" width=32> <strong>Jacob Thornton</strong> <small>@fat</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe> <a href=https://github.com/cvrebert class=team-member> <img alt="@cvrebert avatar" height=32 src="https://secure.gravatar.com/avatar/edec428c425453955f770095a7d26c50.jpg?s=32" width=32> <strong>Chris Rebert</strong> <small>@cvrebert</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe> <a href=https://github.com/juthilo class=team-member> <img alt="@juthilo avatar" height=32 src="https://secure.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11.jpg?s=32" width=32> <strong>Julian Thilo</strong> <small>@juthilo</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe> <a href=https://github.com/xhmikosr class=team-member> <img alt="@xhmikosr avatar" height=32 src="https://secure.gravatar.com/avatar/e37759b1ea0125d4e97b1e00b5eed26f.jpg?s=32" width=32> <strong>XhmikosR</strong> <small>@xhmikosr</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe> <a href=https://github.com/hnrch02 class=team-member> <img alt="@hnrch02 avatar" height=32 src="https://secure.gravatar.com/avatar/0d53f5d3d3d28bd470f394d98f7ef48f.jpg?s=32" width=32> <strong>Heinrich Fenkart</strong> <small>@hnrch02</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe> <a href=https://github.com/patrickhlauke class=team-member> <img alt="@patrickhlauke avatar" height=32 src="https://secure.gravatar.com/avatar/357f279672db832fc41a5a2f36559fcb.jpg?s=32" width=32> <strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small> </a> </div> </div> <p>Get involved with Bootstrap development by <a href=https://github.com/twbs/bootstrap/issues/new>opening an issue</a> or submitting a pull request. Read our <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/CONTRIBUTING.md>contributing guidelines</a> for information on how we develop.</p> <h2 id=team-sass>Sass team</h2> <div class="bs-team list-group"> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe> <a href=https://github.com/thomas-mcdonald class=team-member> <img alt="@thomas-mcdonald avatar" height=32 src="https://secure.gravatar.com/avatar/24cd55ab1a62ffb113ab8c02f64c9301.jpg?s=32" width=32> <strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small> </a> </div> <div class=list-group-item> <iframe class=github-btn src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe> <a href=https://github.com/glebm class=team-member> <img alt="@glebm avatar" height=32 src="https://secure.gravatar.com/avatar/729f685b8e8d7e9feed18c177c82e59b.jpg?s=32" width=32> <strong>Gleb Mazovetskiy</strong> <small>@glebm</small> </a> </div> </div> <p>The <a href=https://github.com/twbs/bootstrap-sass>official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href=https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md>contributing guidelines</a> for information on how the Sass port is developed.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=brand>Brand guidelines</h1> <p class=lead>Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href=http://mailchimp.com/about/brand-assets/ rel=noopener target=_blank>Brand Assets</a>.</p> <h2>Mark and logo</h2> <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <div class="bs-docs-booticon bs-docs-booticon-lg">B</div> </div> <div class="bs-brand-item inverse"> <div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div> </div> </div> <div class=bs-brand-logos> <div class=bs-brand-item> <h1>Bootstrap</h1> </div> <div class="bs-brand-item inverse"> <h1>Bootstrap</h1> </div> </div> <h2>Download mark</h2> <p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-solid.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-outline.svg width=144 class=svg> </div> <div class="bs-brand-item inverse"> <img alt=Bootstrap height=144 src=../assets/brand/bootstrap-punchout.svg width=144 class=svg> </div> </div> <h2>Name</h2> <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p> <div class=bs-brand-logos> <div class=bs-brand-item> <h3>Bootstrap</h3> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=sr-only>(correct)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>BootStrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> <div class=bs-brand-item> <h3 class=text-muted>Twitter Bootstrap</h3> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=sr-only>(incorrect)</span> </div> </div> <h2>Colors</h2> <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p> <div class=bs-brand> <div class=color-swatches> <div class="color-swatch bs-purple"></div> <div class="color-swatch bs-purple-light"></div> <div class="color-swatch bs-purple-lighter"></div> <div class="color-swatch bs-gray"></div> </div> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#history>History</a> </li> <li> <a href=#team>Team</a> </li> <li> <a href=#brand>Brand guidelines</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Wall of browser bugs · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/browser-bugs/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Wall of browser bugs</h1> <p>A list of the browser bugs that Bootstrap is currently grappling with.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-12 role=main> <div class=bs-docs-section> <h1 class=page-header id=browser-bugs>Browser bugs</h1> <p class=lead>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p> <p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href=../getting-started/#support>see our browser compatibility docs</a>.</p> <p>See also:</p> <ul> <li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li> <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li> <li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [meta] Issues affecting Bootstrap</a></li> <li><a href=https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o>jQuery's browser bug workarounds</a></li> </ul> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of bug</th> <th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Native browser tooltip for <code class=highlighter-rouge>title</code> shows on first keyboard focus (in addition to custom tooltip component)</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560>Edge issue #6793560</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18692>#18692</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovered element still remains in <code class=highlighter-rouge>:hover</code> state after scrolling away.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673>Edge issue #5381673</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14211>#14211</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>When hovering over a <code class=highlighter-rouge><select></code> menu item, the cursor for the element underneath the menu is displayed.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/817822>Edge issue #817822</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14528>#14528</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>CSS <code class=highlighter-rouge>border-radius</code> sometimes causes lines of bleed-through of the <code class=highlighter-rouge>background-color</code> of the parent element.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037>Edge issue #3342037</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16671>#16671</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>background</code> of <code class=highlighter-rouge><tr></code> is only applied to first child cell instead of all cells in the row</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620>Edge issue #5865620</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18504>#18504</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>@-ms-viewport{width: device-width;}</code> has side-effect of making scrollbars auto-hide</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383>Edge issue #7165383</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18543>#18543</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Background color from lower layer bleeds through transparent border in some cases</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505>Edge issue #6274505</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18228>#18228</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovering over descendant SVG element fires <code class=highlighter-rouge>mouseleave</code> event at ancestor</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318>Edge issue #7787318</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>.table-bordered</code> with an empty <code class=highlighter-rouge><tbody></code> is missing borders.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/13453>#13453</a> </td> </tr> <tr> <td>Firefox </td> <td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/793>#793</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>focus</code> events should not be fired at the <code class=highlighter-rouge>document</code> object</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18365>#18365</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Wide floated table doesn’t wrap onto new line</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19839>#19839</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Mouse sometimes not within element for purposes of <code class=highlighter-rouge>mouseenter</code>/<code class=highlighter-rouge>mouseleave</code> when it’s within SVG elements</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>position: absolute</code> element that’s wider than its column renders differently than other browsers</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1282363">Mozilla bug #1282363</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20161>#20161</a> </td> </tr> <tr> <td>Firefox (Windows) </td> <td><p>Right border of <code class=highlighter-rouge><select></code> menu is sometimes missing when screen is set to uncommon resolution</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15990>#15990</a> </td> </tr> <tr> <td>Firefox (OS X & Linux) </td> <td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19626>#19626</a> </td> </tr> <tr> <td>Chrome (Android) </td> <td><p>Tapping on an <code class=highlighter-rouge><input></code> in a scrollable overlay doesn’t scroll the <code class=highlighter-rouge><input></code> into view</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=595210">Chromium issue #595210</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17338>#17338</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Clicking above <code class=highlighter-rouge><input type="number"></code> increment button flashes the decrement button.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a> </td> <td>Offshoot of <a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Chrome </td> <td><p>CSS infinite linear animation with alpha transparency leaks memory.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=429375">Chromium issue #429375</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14409>#14409</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>:focus</code> <code class=highlighter-rouge>outline</code> style causes cursor to not be displayed when toggling a <code class=highlighter-rouge>readonly</code> <code class=highlighter-rouge><input></code> to read-write.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=465274">Chromium issue #465274</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16022>#16022</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>table-cell</code> borders not overlapping despite <code class=highlighter-rouge>margin-right: -1px</code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=534750">Chromium issue #534750</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17438>#17438</a>, <a href=https://github.com/twbs/bootstrap/issues/14237>#14237</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Clicking scrollbar in <code class=highlighter-rouge><select multiple></code> with overflowed options will select nearby <code class=highlighter-rouge><option></code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=597642">Chromium issue #597642</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19810>#19810</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Chrome (Windows & Linux) </td> <td><p>Animation glitch when returning to inactive tab after animations occurred while tab was hidden.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=449180">Chromium issue #449180</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15298>#15298</a> </td> </tr> <tr> <td>Safari </td> <td><p><code class=highlighter-rouge>rem</code> units in media queries should be calculated using <code class=highlighter-rouge>font-size: initial</code>, not the root element’s <code class=highlighter-rouge>font-size</code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p><code class=highlighter-rouge>px</code>, <code class=highlighter-rouge>em</code>, and <code class=highlighter-rouge>rem</code> should all behave the same in media queries when page zoom is applied</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Weird button behavior with some <code class=highlighter-rouge><input type="number"></code> elements.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>, <a href=https://openradar.appspot.com/18834768>Apple Safari Radar #18834768</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a>, <a href=https://github.com/necolas/normalize.css/issues/283>Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Small font size when printing webpage with fixed-width <code class=highlighter-rouge>.container</code>.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>, <a href=https://openradar.appspot.com/19435018>Apple Safari Radar #19435018</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14868>#14868</a> </td> </tr> <tr> <td>Safari (iPad) </td> <td><p><code class=highlighter-rouge><select></code> menu on iPad causes shifting of hit-testing areas</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150079">WebKit bug #150079</a>, <a href=https://openradar.appspot.com/23082521>Apple Safari Radar #23082521</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14975>#14975</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>transform: translate3d(0,0,0);</code> rendering bug.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href=https://openradar.appspot.com/18804973>Apple Safari Radar #18804973</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14603>#14603</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Text input’s cursor doesn’t move while scrolling the page.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href=https://openradar.appspot.com/18819624>Apple Safari Radar #18819624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14708>#14708</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Can’t move cursor to start of text after entering long string of text into <code class=highlighter-rouge><input type="text"></code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>, <a href=https://openradar.appspot.com/22299624>Apple Safari Radar #22299624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16988>#16988</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>display: block</code> causes text of temporal <code class=highlighter-rouge><input></code>s to become vertically misaligned</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>, <a href=https://openradar.appspot.com/19434878>Apple Safari Radar #19434878</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/11266>#11266</a>, <a href=https://github.com/twbs/bootstrap/issues/13098>#13098</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping on <code class=highlighter-rouge><body></code> doesn’t fire <code class=highlighter-rouge>click</code> events</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16028>#16028</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18859>#18859</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping into an <code class=highlighter-rouge><input></code> within a <code class=highlighter-rouge>position:fixed</code> element scrolls to the top of the page</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>, <a href=https://openradar.appspot.com/24235301>Apple Safari Radar #24235301</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17497>#17497</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge><body></code> with <code class=highlighter-rouge>overflow:hidden</code> CSS is scrollable on iOS</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Scroll gesture in text field in <code class=highlighter-rouge>position:fixed</code> element sometimes scrolls <code class=highlighter-rouge><body></code> instead of scrollable ancestor</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping from one <code class=highlighter-rouge><input></code> to another in an overlay can cause shaking/jiggling effect</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158276">WebKit bug #158276</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19927>#19927</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Modal with <code class=highlighter-rouge>-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17695>#17695</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Safari (iPad Pro) </td> <td><p>Rendering of descendants of <code class=highlighter-rouge>position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>, <a href=https://openradar.appspot.com/24030853>Apple Safari Radar #24030853</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18738>#18738</a> </td> </tr> </tbody> </table> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=most-wanted>Most wanted features</h1> <p class=lead>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.</p> <p>We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.</p> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of feature</th> <th>Upstream issue(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532>Edge UserVoice idea #12299532</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621>Edge UserVoice idea #6263621</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Fire a <a href=https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel><code class=highlighter-rouge>transitioncancel</code> event</a> when a CSS transition is canceled</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264125">Mozilla bug #1264125</a> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1182856">Mozilla bug #1182856</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=231752">Chromium issue #231752</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Wall of browser bugs · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/browser-bugs/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Wall of browser bugs</h1> <p>A list of the browser bugs that Bootstrap is currently grappling with.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-12 role=main> <div class=bs-docs-section> <h1 class=page-header id=browser-bugs>Browser bugs</h1> <p class=lead>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p> <p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href=../getting-started/#support>see our browser compatibility docs</a>.</p> <p>See also:</p> <ul> <li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li> <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li> <li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [meta] Issues affecting Bootstrap</a></li> <li><a href=https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o>jQuery's browser bug workarounds</a></li> </ul> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of bug</th> <th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Native browser tooltip for <code class=highlighter-rouge>title</code> shows on first keyboard focus (in addition to custom tooltip component)</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560>Edge issue #6793560</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18692>#18692</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovered element still remains in <code class=highlighter-rouge>:hover</code> state after scrolling away.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673>Edge issue #5381673</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14211>#14211</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>When hovering over a <code class=highlighter-rouge><select></code> menu item, the cursor for the element underneath the menu is displayed.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/817822>Edge issue #817822</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14528>#14528</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>CSS <code class=highlighter-rouge>border-radius</code> sometimes causes lines of bleed-through of the <code class=highlighter-rouge>background-color</code> of the parent element.</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037>Edge issue #3342037</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16671>#16671</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>background</code> of <code class=highlighter-rouge><tr></code> is only applied to first child cell instead of all cells in the row</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620>Edge issue #5865620</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18504>#18504</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p><code class=highlighter-rouge>@-ms-viewport{width: device-width;}</code> has side-effect of making scrollbars auto-hide</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383>Edge issue #7165383</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18543>#18543</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Background color from lower layer bleeds through transparent border in some cases</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505>Edge issue #6274505</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18228>#18228</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Hovering over descendant SVG element fires <code class=highlighter-rouge>mouseleave</code> event at ancestor</p> </td> <td><a href=https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318>Edge issue #7787318</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>.table-bordered</code> with an empty <code class=highlighter-rouge><tbody></code> is missing borders.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/13453>#13453</a> </td> </tr> <tr> <td>Firefox </td> <td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/793>#793</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>focus</code> events should not be fired at the <code class=highlighter-rouge>document</code> object</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18365>#18365</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Wide floated table doesn’t wrap onto new line</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19839>#19839</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Mouse sometimes not within element for purposes of <code class=highlighter-rouge>mouseenter</code>/<code class=highlighter-rouge>mouseleave</code> when it’s within SVG elements</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19670>#19670</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>position: absolute</code> element that’s wider than its column renders differently than other browsers</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1282363">Mozilla bug #1282363</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20161>#20161</a> </td> </tr> <tr> <td>Firefox (Windows) </td> <td><p>Right border of <code class=highlighter-rouge><select></code> menu is sometimes missing when screen is set to uncommon resolution</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15990>#15990</a> </td> </tr> <tr> <td>Firefox (OS X & Linux) </td> <td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19626>#19626</a> </td> </tr> <tr> <td>Chrome (Android) </td> <td><p>Tapping on an <code class=highlighter-rouge><input></code> in a scrollable overlay doesn’t scroll the <code class=highlighter-rouge><input></code> into view</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=595210">Chromium issue #595210</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17338>#17338</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Clicking above <code class=highlighter-rouge><input type="number"></code> increment button flashes the decrement button.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a> </td> <td>Offshoot of <a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Chrome </td> <td><p>CSS infinite linear animation with alpha transparency leaks memory.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=429375">Chromium issue #429375</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14409>#14409</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>:focus</code> <code class=highlighter-rouge>outline</code> style causes cursor to not be displayed when toggling a <code class=highlighter-rouge>readonly</code> <code class=highlighter-rouge><input></code> to read-write.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=465274">Chromium issue #465274</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16022>#16022</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>table-cell</code> borders not overlapping despite <code class=highlighter-rouge>margin-right: -1px</code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=534750">Chromium issue #534750</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17438>#17438</a>, <a href=https://github.com/twbs/bootstrap/issues/14237>#14237</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Clicking scrollbar in <code class=highlighter-rouge><select multiple></code> with overflowed options will select nearby <code class=highlighter-rouge><option></code></p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=597642">Chromium issue #597642</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19810>#19810</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Chrome (Windows & Linux) </td> <td><p>Animation glitch when returning to inactive tab after animations occurred while tab was hidden.</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=449180">Chromium issue #449180</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15298>#15298</a> </td> </tr> <tr> <td>Safari </td> <td><p><code class=highlighter-rouge>rem</code> units in media queries should be calculated using <code class=highlighter-rouge>font-size: initial</code>, not the root element’s <code class=highlighter-rouge>font-size</code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p><code class=highlighter-rouge>px</code>, <code class=highlighter-rouge>em</code>, and <code class=highlighter-rouge>rem</code> should all behave the same in media queries when page zoom is applied</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17403>#17403</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Weird button behavior with some <code class=highlighter-rouge><input type="number"></code> elements.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>, <a href=https://openradar.appspot.com/18834768>Apple Safari Radar #18834768</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a>, <a href=https://github.com/necolas/normalize.css/issues/283>Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Small font size when printing webpage with fixed-width <code class=highlighter-rouge>.container</code>.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>, <a href=https://openradar.appspot.com/19435018>Apple Safari Radar #19435018</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14868>#14868</a> </td> </tr> <tr> <td>Safari (iPad) </td> <td><p><code class=highlighter-rouge><select></code> menu on iPad causes shifting of hit-testing areas</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150079">WebKit bug #150079</a>, <a href=https://openradar.appspot.com/23082521>Apple Safari Radar #23082521</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14975>#14975</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>transform: translate3d(0,0,0);</code> rendering bug.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href=https://openradar.appspot.com/18804973>Apple Safari Radar #18804973</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14603>#14603</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Text input’s cursor doesn’t move while scrolling the page.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href=https://openradar.appspot.com/18819624>Apple Safari Radar #18819624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14708>#14708</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Can’t move cursor to start of text after entering long string of text into <code class=highlighter-rouge><input type="text"></code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>, <a href=https://openradar.appspot.com/22299624>Apple Safari Radar #22299624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16988>#16988</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>display: block</code> causes text of temporal <code class=highlighter-rouge><input></code>s to become vertically misaligned</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>, <a href=https://openradar.appspot.com/19434878>Apple Safari Radar #19434878</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/11266>#11266</a>, <a href=https://github.com/twbs/bootstrap/issues/13098>#13098</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping on <code class=highlighter-rouge><body></code> doesn’t fire <code class=highlighter-rouge>click</code> events</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16028>#16028</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18859>#18859</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping into an <code class=highlighter-rouge><input></code> within a <code class=highlighter-rouge>position:fixed</code> element scrolls to the top of the page</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>, <a href=https://openradar.appspot.com/24235301>Apple Safari Radar #24235301</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17497>#17497</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge><body></code> with <code class=highlighter-rouge>overflow:hidden</code> CSS is scrollable on iOS</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Scroll gesture in text field in <code class=highlighter-rouge>position:fixed</code> element sometimes scrolls <code class=highlighter-rouge><body></code> instead of scrollable ancestor</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14839>#14839</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Tapping from one <code class=highlighter-rouge><input></code> to another in an overlay can cause shaking/jiggling effect</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158276">WebKit bug #158276</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19927>#19927</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Modal with <code class=highlighter-rouge>-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17695>#17695</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Don’t make <code class=highlighter-rouge>:hover</code> sticky on touch-friendly webpages</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12832>#12832</a> </td> </tr> <tr> <td>Safari (iPad Pro) </td> <td><p>Rendering of descendants of <code class=highlighter-rouge>position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>, <a href=https://openradar.appspot.com/24030853>Apple Safari Radar #24030853</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18738>#18738</a> </td> </tr> </tbody> </table> </div> </div> <div class=bs-docs-section> <h1 class=page-header id=most-wanted>Most wanted features</h1> <p class=lead>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.</p> <p>We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.</p> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of feature</th> <th>Upstream issue(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Microsoft Edge </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532>Edge UserVoice idea #12299532</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Microsoft Edge </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href=https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621>Edge UserVoice idea #6263621</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Fire a <a href=https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel><code class=highlighter-rouge>transitioncancel</code> event</a> when a CSS transition is canceled</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264125">Mozilla bug #1264125</a> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1182856">Mozilla bug #1182856</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class=highlighter-rouge>of <selector-list></code> clause</a> of the <code class=highlighter-rouge>:nth-child()</code> pseudo-class</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20143>#20143</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Implement <a href=http://html5please.com/#position:sticky>sticky positioning</a> from CSS Positioned Layout Level 3</p> </td> <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=231752">Chromium issue #231752</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17021>#17021</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:dir><code class=highlighter-rouge>:dir()</code> pseudo-class</a> from Selectors Level 4</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/19984>#19984</a> </td> </tr> <tr> <td>Safari </td> <td><p>Implement the HTML5 <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog><code class=highlighter-rouge><dialog></code> element</a></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/20175>#20175</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Components · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/components/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li class=active> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=glyphicons>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href=https://www.glyphicons.com/ >Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href=https://www.glyphicons.com/ >Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <h2 id=glyphicons-how-to-use>How to use</h2> <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <h2 id=glyphicons-examples>Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class=bs-example data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><button</span> <span class=na>type=</span><span class=s>"button"</span> <span class=na>class=</span><span class=s>"btn btn-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Components · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/components/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li class=active> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Components</h1> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=glyphicons>Glyphicons</h1> <h2 id=glyphicons-glyphs>Available glyphs</h2> <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href=https://www.glyphicons.com/ >Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href=https://www.glyphicons.com/ >Glyphicons</a> whenever possible.</p> <div class=bs-glyphicons> <ul class=bs-glyphicons-list> <li> <span class="glyphicon glyphicon-asterisk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-asterisk</span> </li> <li> <span class="glyphicon glyphicon-plus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus</span> </li> <li> <span class="glyphicon glyphicon-euro" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-euro</span> </li> <li> <span class="glyphicon glyphicon-eur" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eur</span> </li> <li> <span class="glyphicon glyphicon-minus" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus</span> </li> <li> <span class="glyphicon glyphicon-cloud" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud</span> </li> <li> <span class="glyphicon glyphicon-envelope" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-envelope</span> </li> <li> <span class="glyphicon glyphicon-pencil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pencil</span> </li> <li> <span class="glyphicon glyphicon-glass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-glass</span> </li> <li> <span class="glyphicon glyphicon-music" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-music</span> </li> <li> <span class="glyphicon glyphicon-search" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-search</span> </li> <li> <span class="glyphicon glyphicon-heart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart</span> </li> <li> <span class="glyphicon glyphicon-star" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star</span> </li> <li> <span class="glyphicon glyphicon-star-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-star-empty</span> </li> <li> <span class="glyphicon glyphicon-user" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-user</span> </li> <li> <span class="glyphicon glyphicon-film" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-film</span> </li> <li> <span class="glyphicon glyphicon-th-large" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-large</span> </li> <li> <span class="glyphicon glyphicon-th" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th</span> </li> <li> <span class="glyphicon glyphicon-th-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-th-list</span> </li> <li> <span class="glyphicon glyphicon-ok" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok</span> </li> <li> <span class="glyphicon glyphicon-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove</span> </li> <li> <span class="glyphicon glyphicon-zoom-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-in</span> </li> <li> <span class="glyphicon glyphicon-zoom-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-zoom-out</span> </li> <li> <span class="glyphicon glyphicon-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-off</span> </li> <li> <span class="glyphicon glyphicon-signal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-signal</span> </li> <li> <span class="glyphicon glyphicon-cog" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cog</span> </li> <li> <span class="glyphicon glyphicon-trash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-trash</span> </li> <li> <span class="glyphicon glyphicon-home" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-home</span> </li> <li> <span class="glyphicon glyphicon-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-file</span> </li> <li> <span class="glyphicon glyphicon-time" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-time</span> </li> <li> <span class="glyphicon glyphicon-road" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-road</span> </li> <li> <span class="glyphicon glyphicon-download-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download-alt</span> </li> <li> <span class="glyphicon glyphicon-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-download</span> </li> <li> <span class="glyphicon glyphicon-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-upload</span> </li> <li> <span class="glyphicon glyphicon-inbox" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-inbox</span> </li> <li> <span class="glyphicon glyphicon-play-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play-circle</span> </li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-repeat</span> </li> <li> <span class="glyphicon glyphicon-refresh" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-refresh</span> </li> <li> <span class="glyphicon glyphicon-list-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list-alt</span> </li> <li> <span class="glyphicon glyphicon-lock" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lock</span> </li> <li> <span class="glyphicon glyphicon-flag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flag</span> </li> <li> <span class="glyphicon glyphicon-headphones" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-headphones</span> </li> <li> <span class="glyphicon glyphicon-volume-off" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-off</span> </li> <li> <span class="glyphicon glyphicon-volume-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-down</span> </li> <li> <span class="glyphicon glyphicon-volume-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-volume-up</span> </li> <li> <span class="glyphicon glyphicon-qrcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-qrcode</span> </li> <li> <span class="glyphicon glyphicon-barcode" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-barcode</span> </li> <li> <span class="glyphicon glyphicon-tag" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tag</span> </li> <li> <span class="glyphicon glyphicon-tags" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tags</span> </li> <li> <span class="glyphicon glyphicon-book" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-book</span> </li> <li> <span class="glyphicon glyphicon-bookmark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bookmark</span> </li> <li> <span class="glyphicon glyphicon-print" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-print</span> </li> <li> <span class="glyphicon glyphicon-camera" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-camera</span> </li> <li> <span class="glyphicon glyphicon-font" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-font</span> </li> <li> <span class="glyphicon glyphicon-bold" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bold</span> </li> <li> <span class="glyphicon glyphicon-italic" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-italic</span> </li> <li> <span class="glyphicon glyphicon-text-height" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-height</span> </li> <li> <span class="glyphicon glyphicon-text-width" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-width</span> </li> <li> <span class="glyphicon glyphicon-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-left</span> </li> <li> <span class="glyphicon glyphicon-align-center" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-center</span> </li> <li> <span class="glyphicon glyphicon-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-right</span> </li> <li> <span class="glyphicon glyphicon-align-justify" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-align-justify</span> </li> <li> <span class="glyphicon glyphicon-list" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-list</span> </li> <li> <span class="glyphicon glyphicon-indent-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-left</span> </li> <li> <span class="glyphicon glyphicon-indent-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-indent-right</span> </li> <li> <span class="glyphicon glyphicon-facetime-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-facetime-video</span> </li> <li> <span class="glyphicon glyphicon-picture" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-picture</span> </li> <li> <span class="glyphicon glyphicon-map-marker" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-map-marker</span> </li> <li> <span class="glyphicon glyphicon-adjust" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-adjust</span> </li> <li> <span class="glyphicon glyphicon-tint" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tint</span> </li> <li> <span class="glyphicon glyphicon-edit" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-edit</span> </li> <li> <span class="glyphicon glyphicon-share" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share</span> </li> <li> <span class="glyphicon glyphicon-check" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-check</span> </li> <li> <span class="glyphicon glyphicon-move" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-move</span> </li> <li> <span class="glyphicon glyphicon-step-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-backward</span> </li> <li> <span class="glyphicon glyphicon-fast-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-backward</span> </li> <li> <span class="glyphicon glyphicon-backward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-backward</span> </li> <li> <span class="glyphicon glyphicon-play" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-play</span> </li> <li> <span class="glyphicon glyphicon-pause" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pause</span> </li> <li> <span class="glyphicon glyphicon-stop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stop</span> </li> <li> <span class="glyphicon glyphicon-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-forward</span> </li> <li> <span class="glyphicon glyphicon-fast-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fast-forward</span> </li> <li> <span class="glyphicon glyphicon-step-forward" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-step-forward</span> </li> <li> <span class="glyphicon glyphicon-eject" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eject</span> </li> <li> <span class="glyphicon glyphicon-chevron-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-left</span> </li> <li> <span class="glyphicon glyphicon-chevron-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-right</span> </li> <li> <span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plus-sign</span> </li> <li> <span class="glyphicon glyphicon-minus-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-minus-sign</span> </li> <li> <span class="glyphicon glyphicon-remove-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-sign</span> </li> <li> <span class="glyphicon glyphicon-ok-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-sign</span> </li> <li> <span class="glyphicon glyphicon-question-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-question-sign</span> </li> <li> <span class="glyphicon glyphicon-info-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-info-sign</span> </li> <li> <span class="glyphicon glyphicon-screenshot" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-screenshot</span> </li> <li> <span class="glyphicon glyphicon-remove-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-remove-circle</span> </li> <li> <span class="glyphicon glyphicon-ok-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ok-circle</span> </li> <li> <span class="glyphicon glyphicon-ban-circle" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ban-circle</span> </li> <li> <span class="glyphicon glyphicon-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-share-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-share-alt</span> </li> <li> <span class="glyphicon glyphicon-resize-full" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-full</span> </li> <li> <span class="glyphicon glyphicon-resize-small" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-small</span> </li> <li> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-exclamation-sign</span> </li> <li> <span class="glyphicon glyphicon-gift" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gift</span> </li> <li> <span class="glyphicon glyphicon-leaf" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-leaf</span> </li> <li> <span class="glyphicon glyphicon-fire" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fire</span> </li> <li> <span class="glyphicon glyphicon-eye-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-open</span> </li> <li> <span class="glyphicon glyphicon-eye-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-eye-close</span> </li> <li> <span class="glyphicon glyphicon-warning-sign" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-warning-sign</span> </li> <li> <span class="glyphicon glyphicon-plane" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-plane</span> </li> <li> <span class="glyphicon glyphicon-calendar" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-calendar</span> </li> <li> <span class="glyphicon glyphicon-random" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-random</span> </li> <li> <span class="glyphicon glyphicon-comment" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-comment</span> </li> <li> <span class="glyphicon glyphicon-magnet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-magnet</span> </li> <li> <span class="glyphicon glyphicon-chevron-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-up</span> </li> <li> <span class="glyphicon glyphicon-chevron-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-chevron-down</span> </li> <li> <span class="glyphicon glyphicon-retweet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-retweet</span> </li> <li> <span class="glyphicon glyphicon-shopping-cart" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-shopping-cart</span> </li> <li> <span class="glyphicon glyphicon-folder-close" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-close</span> </li> <li> <span class="glyphicon glyphicon-folder-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-folder-open</span> </li> <li> <span class="glyphicon glyphicon-resize-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-vertical</span> </li> <li> <span class="glyphicon glyphicon-resize-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-resize-horizontal</span> </li> <li> <span class="glyphicon glyphicon-hdd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hdd</span> </li> <li> <span class="glyphicon glyphicon-bullhorn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bullhorn</span> </li> <li> <span class="glyphicon glyphicon-bell" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bell</span> </li> <li> <span class="glyphicon glyphicon-certificate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-certificate</span> </li> <li> <span class="glyphicon glyphicon-thumbs-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-up</span> </li> <li> <span class="glyphicon glyphicon-thumbs-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-thumbs-down</span> </li> <li> <span class="glyphicon glyphicon-hand-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-right</span> </li> <li> <span class="glyphicon glyphicon-hand-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-left</span> </li> <li> <span class="glyphicon glyphicon-hand-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-up</span> </li> <li> <span class="glyphicon glyphicon-hand-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hand-down</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-right</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-left</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-up</span> </li> <li> <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-circle-arrow-down</span> </li> <li> <span class="glyphicon glyphicon-globe" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-globe</span> </li> <li> <span class="glyphicon glyphicon-wrench" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-wrench</span> </li> <li> <span class="glyphicon glyphicon-tasks" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tasks</span> </li> <li> <span class="glyphicon glyphicon-filter" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-filter</span> </li> <li> <span class="glyphicon glyphicon-briefcase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-briefcase</span> </li> <li> <span class="glyphicon glyphicon-fullscreen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-fullscreen</span> </li> <li> <span class="glyphicon glyphicon-dashboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-dashboard</span> </li> <li> <span class="glyphicon glyphicon-paperclip" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paperclip</span> </li> <li> <span class="glyphicon glyphicon-heart-empty" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-heart-empty</span> </li> <li> <span class="glyphicon glyphicon-link" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-link</span> </li> <li> <span class="glyphicon glyphicon-phone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone</span> </li> <li> <span class="glyphicon glyphicon-pushpin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pushpin</span> </li> <li> <span class="glyphicon glyphicon-usd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-usd</span> </li> <li> <span class="glyphicon glyphicon-gbp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-gbp</span> </li> <li> <span class="glyphicon glyphicon-sort" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet</span> </li> <li> <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-alphabet-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order</span> </li> <li> <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-order-alt</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes</span> </li> <li> <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sort-by-attributes-alt</span> </li> <li> <span class="glyphicon glyphicon-unchecked" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-unchecked</span> </li> <li> <span class="glyphicon glyphicon-expand" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-expand</span> </li> <li> <span class="glyphicon glyphicon-collapse-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-down</span> </li> <li> <span class="glyphicon glyphicon-collapse-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-collapse-up</span> </li> <li> <span class="glyphicon glyphicon-log-in" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-in</span> </li> <li> <span class="glyphicon glyphicon-flash" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-flash</span> </li> <li> <span class="glyphicon glyphicon-log-out" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-log-out</span> </li> <li> <span class="glyphicon glyphicon-new-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-new-window</span> </li> <li> <span class="glyphicon glyphicon-record" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-record</span> </li> <li> <span class="glyphicon glyphicon-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save</span> </li> <li> <span class="glyphicon glyphicon-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open</span> </li> <li> <span class="glyphicon glyphicon-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-saved</span> </li> <li> <span class="glyphicon glyphicon-import" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-import</span> </li> <li> <span class="glyphicon glyphicon-export" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-export</span> </li> <li> <span class="glyphicon glyphicon-send" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-send</span> </li> <li> <span class="glyphicon glyphicon-floppy-disk" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-disk</span> </li> <li> <span class="glyphicon glyphicon-floppy-saved" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-saved</span> </li> <li> <span class="glyphicon glyphicon-floppy-remove" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-remove</span> </li> <li> <span class="glyphicon glyphicon-floppy-save" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-save</span> </li> <li> <span class="glyphicon glyphicon-floppy-open" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-floppy-open</span> </li> <li> <span class="glyphicon glyphicon-credit-card" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-credit-card</span> </li> <li> <span class="glyphicon glyphicon-transfer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-transfer</span> </li> <li> <span class="glyphicon glyphicon-cutlery" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cutlery</span> </li> <li> <span class="glyphicon glyphicon-header" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-header</span> </li> <li> <span class="glyphicon glyphicon-compressed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-compressed</span> </li> <li> <span class="glyphicon glyphicon-earphone" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-earphone</span> </li> <li> <span class="glyphicon glyphicon-phone-alt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-phone-alt</span> </li> <li> <span class="glyphicon glyphicon-tower" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tower</span> </li> <li> <span class="glyphicon glyphicon-stats" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-stats</span> </li> <li> <span class="glyphicon glyphicon-sd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sd-video</span> </li> <li> <span class="glyphicon glyphicon-hd-video" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hd-video</span> </li> <li> <span class="glyphicon glyphicon-subtitles" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subtitles</span> </li> <li> <span class="glyphicon glyphicon-sound-stereo" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-stereo</span> </li> <li> <span class="glyphicon glyphicon-sound-dolby" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-dolby</span> </li> <li> <span class="glyphicon glyphicon-sound-5-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-5-1</span> </li> <li> <span class="glyphicon glyphicon-sound-6-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-6-1</span> </li> <li> <span class="glyphicon glyphicon-sound-7-1" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sound-7-1</span> </li> <li> <span class="glyphicon glyphicon-copyright-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copyright-mark</span> </li> <li> <span class="glyphicon glyphicon-registration-mark" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-registration-mark</span> </li> <li> <span class="glyphicon glyphicon-cloud-download" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-download</span> </li> <li> <span class="glyphicon glyphicon-cloud-upload" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cloud-upload</span> </li> <li> <span class="glyphicon glyphicon-tree-conifer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-conifer</span> </li> <li> <span class="glyphicon glyphicon-tree-deciduous" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tree-deciduous</span> </li> <li> <span class="glyphicon glyphicon-cd" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-cd</span> </li> <li> <span class="glyphicon glyphicon-save-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-save-file</span> </li> <li> <span class="glyphicon glyphicon-open-file" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-open-file</span> </li> <li> <span class="glyphicon glyphicon-level-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-level-up</span> </li> <li> <span class="glyphicon glyphicon-copy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-copy</span> </li> <li> <span class="glyphicon glyphicon-paste" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-paste</span> </li> <li> <span class="glyphicon glyphicon-alert" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-alert</span> </li> <li> <span class="glyphicon glyphicon-equalizer" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-equalizer</span> </li> <li> <span class="glyphicon glyphicon-king" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-king</span> </li> <li> <span class="glyphicon glyphicon-queen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-queen</span> </li> <li> <span class="glyphicon glyphicon-pawn" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-pawn</span> </li> <li> <span class="glyphicon glyphicon-bishop" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bishop</span> </li> <li> <span class="glyphicon glyphicon-knight" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-knight</span> </li> <li> <span class="glyphicon glyphicon-baby-formula" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-baby-formula</span> </li> <li> <span class="glyphicon glyphicon-tent" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-tent</span> </li> <li> <span class="glyphicon glyphicon-blackboard" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-blackboard</span> </li> <li> <span class="glyphicon glyphicon-bed" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bed</span> </li> <li> <span class="glyphicon glyphicon-apple" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-apple</span> </li> <li> <span class="glyphicon glyphicon-erase" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-erase</span> </li> <li> <span class="glyphicon glyphicon-hourglass" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-hourglass</span> </li> <li> <span class="glyphicon glyphicon-lamp" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-lamp</span> </li> <li> <span class="glyphicon glyphicon-duplicate" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-duplicate</span> </li> <li> <span class="glyphicon glyphicon-piggy-bank" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-piggy-bank</span> </li> <li> <span class="glyphicon glyphicon-scissors" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scissors</span> </li> <li> <span class="glyphicon glyphicon-bitcoin" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-bitcoin</span> </li> <li> <span class="glyphicon glyphicon-btc" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-btc</span> </li> <li> <span class="glyphicon glyphicon-xbt" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-xbt</span> </li> <li> <span class="glyphicon glyphicon-yen" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-yen</span> </li> <li> <span class="glyphicon glyphicon-jpy" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-jpy</span> </li> <li> <span class="glyphicon glyphicon-ruble" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ruble</span> </li> <li> <span class="glyphicon glyphicon-rub" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-rub</span> </li> <li> <span class="glyphicon glyphicon-scale" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-scale</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly</span> </li> <li> <span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-ice-lolly-tasted</span> </li> <li> <span class="glyphicon glyphicon-education" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-education</span> </li> <li> <span class="glyphicon glyphicon-option-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-horizontal</span> </li> <li> <span class="glyphicon glyphicon-option-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-option-vertical</span> </li> <li> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-hamburger</span> </li> <li> <span class="glyphicon glyphicon-modal-window" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-modal-window</span> </li> <li> <span class="glyphicon glyphicon-oil" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-oil</span> </li> <li> <span class="glyphicon glyphicon-grain" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-grain</span> </li> <li> <span class="glyphicon glyphicon-sunglasses" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-sunglasses</span> </li> <li> <span class="glyphicon glyphicon-text-size" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-size</span> </li> <li> <span class="glyphicon glyphicon-text-color" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-color</span> </li> <li> <span class="glyphicon glyphicon-text-background" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-text-background</span> </li> <li> <span class="glyphicon glyphicon-object-align-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-top</span> </li> <li> <span class="glyphicon glyphicon-object-align-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-bottom</span> </li> <li> <span class="glyphicon glyphicon-object-align-horizontal" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-horizontal</span> </li> <li> <span class="glyphicon glyphicon-object-align-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-left</span> </li> <li> <span class="glyphicon glyphicon-object-align-vertical" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-vertical</span> </li> <li> <span class="glyphicon glyphicon-object-align-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-object-align-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-right</span> </li> <li> <span class="glyphicon glyphicon-triangle-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-left</span> </li> <li> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-bottom</span> </li> <li> <span class="glyphicon glyphicon-triangle-top" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-triangle-top</span> </li> <li> <span class="glyphicon glyphicon-console" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-console</span> </li> <li> <span class="glyphicon glyphicon-superscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-superscript</span> </li> <li> <span class="glyphicon glyphicon-subscript" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-subscript</span> </li> <li> <span class="glyphicon glyphicon-menu-left" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-left</span> </li> <li> <span class="glyphicon glyphicon-menu-right" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-right</span> </li> <li> <span class="glyphicon glyphicon-menu-down" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-down</span> </li> <li> <span class="glyphicon glyphicon-menu-up" aria-hidden=true></span> <span class=glyphicon-class>glyphicon glyphicon-menu-up</span> </li> </ul> </div> <h2 id=glyphicons-how-to-use>How to use</h2> <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-dont-mix> <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-glyphicons-empty-only> <h4>Only for use on empty elements</h4> <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> </div> <div class="bs-callout bs-callout-info" id=callout-glyphicons-location> <h4>Changing the icon font location</h4> <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> <ul> <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> <li>Utilize the <a href=http://lesscss.org/usage/#command-line-usage-relative-urls>relative URLs option</a> provided by the Less compiler.</li> <li>Change the <code>url()</code> paths in the compiled CSS.</li> </ul> <p>Use whatever option best suits your specific development setup.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-glyphicons-accessibility> <h4>Accessible icons</h4> <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-search"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span></code></pre></figure> <h2 id=glyphicons-examples>Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class=bs-example data-example-id=glyphicons-general> <div class=btn-toolbar role=toolbar> <div class=btn-group> <button type=button class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden=true></span></button> <button type=button class="btn btn-default" aria-label=Justify><span class="glyphicon glyphicon-align-justify" aria-hidden=true></span></button> </div> </div> <div class=btn-toolbar role=toolbar> <button type=button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> <button type=button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden=true></span> Star</button> </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><button</span> <span class=na>type=</span><span class=s>"button"</span> <span class=na>class=</span><span class=s>"btn btn-default"</span> <span class=na>aria-label=</span><span class=s>"Left Align"</span><span class=nt>></span>
<span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-align-left"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span>
<span class=nt></button></span>
<span class=c><!-- 4:3 aspect ratio --></span>
<span class=nt><div</span> <span class=na>class=</span><span class=s>"embed-responsive embed-responsive-4by3"</span><span class=nt>></span>
<span class=nt><iframe</span> <span class=na>class=</span><span class=s>"embed-responsive-item"</span> <span class=na>src=</span><span class=s>"..."</span><span class=nt>></iframe></span>
-<span class=nt></div></span></code></pre></figure> </div> <div class=bs-docs-section> <h1 class=page-header id=wells>Wells</h1> <h2>Default well</h2> <p>Use the well as a simple effect on an element to give it an inset effect.</p> <div class=bs-example data-example-id=default-well> <div class=well> Look, I'm in a well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> <h2>Optional classes</h2> <p>Control padding and rounded corners with two optional modifier classes.</p> <div class=bs-example data-example-id=large-well> <div class="well well-lg"> Look, I'm in a large well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well well-lg"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> <div class=bs-example data-example-id=small-well> <div class="well well-sm"> Look, I'm in a small well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well well-sm"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#glyphicons>Glyphicons</a> <ul class=nav> <li><a href=#glyphicons-glyphs>Available glyphs</a></li> <li><a href=#glyphicons-how-to-use>How to use</a></li> <li><a href=#glyphicons-examples>Examples</a></li> </ul> </li> <li> <a href=#dropdowns>Dropdowns</a> <ul class=nav> <li><a href=#dropdowns-example>Example</a></li> <li><a href=#dropdowns-alignment>Alignment</a></li> <li><a href=#dropdowns-headers>Headers</a></li> <li><a href=#dropdowns-divider>Divider</a></li> <li><a href=#dropdowns-disabled>Disabled menu items</a></li> </ul> </li> <li> <a href=#btn-groups>Button groups</a> <ul class=nav> <li><a href=#btn-groups-single>Basic example</a></li> <li><a href=#btn-groups-toolbar>Button toolbar</a></li> <li><a href=#btn-groups-sizing>Sizing</a></li> <li><a href=#btn-groups-nested>Nesting</a></li> <li><a href=#btn-groups-vertical>Vertical variation</a></li> <li><a href=#btn-groups-justified>Justified button groups</a></li> </ul> </li> <li> <a href=#btn-dropdowns>Button dropdowns</a> <ul class=nav> <li><a href=#btn-dropdowns-single>Single button dropdowns</a></li> <li><a href=#btn-dropdowns-split>Split button dropdowns</a></li> <li><a href=#btn-dropdowns-sizing>Sizing</a></li> <li><a href=#btn-dropdowns-dropup>Dropup variation</a></li> </ul> </li> <li> <a href=#input-groups>Input groups</a> <ul class=nav> <li><a href=#input-groups-basic>Basic example</a></li> <li><a href=#input-groups-sizing>Sizing</a></li> <li><a href=#input-groups-checkboxes-radios>Checkbox and radios addons</a></li> <li><a href=#input-groups-buttons>Button addons</a></li> <li><a href=#input-groups-buttons-dropdowns>Buttons with dropdowns</a></li> <li><a href=#input-groups-buttons-segmented>Segmented buttons</a></li> <li><a href=#input-groups-buttons-multiple>Multiple buttons</a></li> </ul> </li> <li> <a href=#nav>Navs</a> <ul class=nav> <li><a href=#nav-tabs>Tabs</a></li> <li><a href=#nav-pills>Pills</a></li> <li><a href=#nav-justified>Justified</a></li> <li><a href=#nav-disabled-links>Disabled links</a></li> <li><a href=#nav-dropdowns>Using dropdowns</a></li> </ul> </li> <li> <a href=#navbar>Navbar</a> <ul class=nav> <li><a href=#navbar-default>Default navbar</a></li> <li><a href=#navbar-brand-image>Brand image</a></li> <li><a href=#navbar-forms>Forms</a></li> <li><a href=#navbar-buttons>Buttons</a></li> <li><a href=#navbar-text>Text</a></li> <li><a href=#navbar-links>Non-nav links</a></li> <li><a href=#navbar-component-alignment>Component alignment</a></li> <li><a href=#navbar-fixed-top>Fixed to top</a></li> <li><a href=#navbar-fixed-bottom>Fixed to bottom</a></li> <li><a href=#navbar-static-top>Static top</a></li> <li><a href=#navbar-inverted>Inverted navbar</a></li> </ul> </li> <li><a href=#breadcrumbs>Breadcrumbs</a></li> <li> <a href=#pagination>Pagination</a> <ul class=nav> <li><a href=#pagination-default>Default pagination</a></li> <li><a href=#pagination-pager>Pager</a></li> </ul> </li> <li><a href=#labels>Labels</a></li> <li><a href=#badges>Badges</a></li> <li><a href=#jumbotron>Jumbotron</a></li> <li><a href=#page-header>Page header</a></li> <li> <a href=#thumbnails>Thumbnails</a> <ul class=nav> <li><a href=#thumbnails-default>Default example</a></li> <li><a href=#thumbnails-custom-content>Custom content</a></li> </ul> </li> <li> <a href=#alerts>Alerts</a> <ul class=nav> <li><a href=#alerts-examples>Examples</a></li> <li><a href=#alerts-dismissible>Dismissible alerts</a></li> <li><a href=#alerts-links>Links in alerts</a></li> </ul> </li> <li> <a href=#progress>Progress bars</a> <ul class=nav> <li><a href=#progress-basic>Basic example</a></li> <li><a href=#progress-label>With label</a></li> <li><a href=#progress-alternatives>Contextual alternatives</a></li> <li><a href=#progress-striped>Striped</a></li> <li><a href=#progress-animated>Animated</a></li> <li><a href=#progress-stacked>Stacked</a></li> </ul> </li> <li> <a href=#media>Media object</a> <ul class=nav> <li><a href=#media-default>Default media</a></li> <li><a href=#media-list>Media list</a></li> </ul> </li> <li> <a href=#list-group>List group</a> <ul class=nav> <li><a href=#list-group-basic>Basic example</a></li> <li><a href=#list-group-badges>Badges</a></li> <li><a href=#list-group-linked>Linked items</a></li> <li><a href=#list-group-buttons>Button items</a></li> <li><a href=#list-group-disabled>Disabled items</a></li> <li><a href=#list-group-contextual-classes>Contextual classes</a></li> <li><a href=#list-group-custom-content>Custom content</a></li> </ul> </li> <li> <a href=#panels>Panels</a> <ul class=nav> <li><a href=#panels-basic>Basic example</a></li> <li><a href=#panels-heading>Panel with heading</a></li> <li><a href=#panels-footer>Panel with footer</a></li> <li><a href=#panels-alternatives>Contextual alternatives</a></li> <li><a href=#panels-tables>With tables</a></li> <li><a href=#panels-list-group>With list groups</a></li> </ul> </li> <li><a href=#responsive-embed>Responsive embed</a></li> <li><a href=#wells>Wells</a></li> </ul> <a href=#top class=back-to-top> Back to top </a> <a href=# class=bs-docs-theme-toggle role=button> Preview theme </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
+<span class=nt></div></span></code></pre></figure> </div> <div class=bs-docs-section> <h1 class=page-header id=wells>Wells</h1> <h2>Default well</h2> <p>Use the well as a simple effect on an element to give it an inset effect.</p> <div class=bs-example data-example-id=default-well> <div class=well> Look, I'm in a well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> <h2>Optional classes</h2> <p>Control padding and rounded corners with two optional modifier classes.</p> <div class=bs-example data-example-id=large-well> <div class="well well-lg"> Look, I'm in a large well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well well-lg"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> <div class=bs-example data-example-id=small-well> <div class="well well-sm"> Look, I'm in a small well! </div> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"well well-sm"</span><span class=nt>></span>...<span class=nt></div></span></code></pre></figure> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#glyphicons>Glyphicons</a> <ul class=nav> <li><a href=#glyphicons-glyphs>Available glyphs</a></li> <li><a href=#glyphicons-how-to-use>How to use</a></li> <li><a href=#glyphicons-examples>Examples</a></li> </ul> </li> <li> <a href=#dropdowns>Dropdowns</a> <ul class=nav> <li><a href=#dropdowns-example>Example</a></li> <li><a href=#dropdowns-alignment>Alignment</a></li> <li><a href=#dropdowns-headers>Headers</a></li> <li><a href=#dropdowns-divider>Divider</a></li> <li><a href=#dropdowns-disabled>Disabled menu items</a></li> </ul> </li> <li> <a href=#btn-groups>Button groups</a> <ul class=nav> <li><a href=#btn-groups-single>Basic example</a></li> <li><a href=#btn-groups-toolbar>Button toolbar</a></li> <li><a href=#btn-groups-sizing>Sizing</a></li> <li><a href=#btn-groups-nested>Nesting</a></li> <li><a href=#btn-groups-vertical>Vertical variation</a></li> <li><a href=#btn-groups-justified>Justified button groups</a></li> </ul> </li> <li> <a href=#btn-dropdowns>Button dropdowns</a> <ul class=nav> <li><a href=#btn-dropdowns-single>Single button dropdowns</a></li> <li><a href=#btn-dropdowns-split>Split button dropdowns</a></li> <li><a href=#btn-dropdowns-sizing>Sizing</a></li> <li><a href=#btn-dropdowns-dropup>Dropup variation</a></li> </ul> </li> <li> <a href=#input-groups>Input groups</a> <ul class=nav> <li><a href=#input-groups-basic>Basic example</a></li> <li><a href=#input-groups-sizing>Sizing</a></li> <li><a href=#input-groups-checkboxes-radios>Checkbox and radios addons</a></li> <li><a href=#input-groups-buttons>Button addons</a></li> <li><a href=#input-groups-buttons-dropdowns>Buttons with dropdowns</a></li> <li><a href=#input-groups-buttons-segmented>Segmented buttons</a></li> <li><a href=#input-groups-buttons-multiple>Multiple buttons</a></li> </ul> </li> <li> <a href=#nav>Navs</a> <ul class=nav> <li><a href=#nav-tabs>Tabs</a></li> <li><a href=#nav-pills>Pills</a></li> <li><a href=#nav-justified>Justified</a></li> <li><a href=#nav-disabled-links>Disabled links</a></li> <li><a href=#nav-dropdowns>Using dropdowns</a></li> </ul> </li> <li> <a href=#navbar>Navbar</a> <ul class=nav> <li><a href=#navbar-default>Default navbar</a></li> <li><a href=#navbar-brand-image>Brand image</a></li> <li><a href=#navbar-forms>Forms</a></li> <li><a href=#navbar-buttons>Buttons</a></li> <li><a href=#navbar-text>Text</a></li> <li><a href=#navbar-links>Non-nav links</a></li> <li><a href=#navbar-component-alignment>Component alignment</a></li> <li><a href=#navbar-fixed-top>Fixed to top</a></li> <li><a href=#navbar-fixed-bottom>Fixed to bottom</a></li> <li><a href=#navbar-static-top>Static top</a></li> <li><a href=#navbar-inverted>Inverted navbar</a></li> </ul> </li> <li><a href=#breadcrumbs>Breadcrumbs</a></li> <li> <a href=#pagination>Pagination</a> <ul class=nav> <li><a href=#pagination-default>Default pagination</a></li> <li><a href=#pagination-pager>Pager</a></li> </ul> </li> <li><a href=#labels>Labels</a></li> <li><a href=#badges>Badges</a></li> <li><a href=#jumbotron>Jumbotron</a></li> <li><a href=#page-header>Page header</a></li> <li> <a href=#thumbnails>Thumbnails</a> <ul class=nav> <li><a href=#thumbnails-default>Default example</a></li> <li><a href=#thumbnails-custom-content>Custom content</a></li> </ul> </li> <li> <a href=#alerts>Alerts</a> <ul class=nav> <li><a href=#alerts-examples>Examples</a></li> <li><a href=#alerts-dismissible>Dismissible alerts</a></li> <li><a href=#alerts-links>Links in alerts</a></li> </ul> </li> <li> <a href=#progress>Progress bars</a> <ul class=nav> <li><a href=#progress-basic>Basic example</a></li> <li><a href=#progress-label>With label</a></li> <li><a href=#progress-alternatives>Contextual alternatives</a></li> <li><a href=#progress-striped>Striped</a></li> <li><a href=#progress-animated>Animated</a></li> <li><a href=#progress-stacked>Stacked</a></li> </ul> </li> <li> <a href=#media>Media object</a> <ul class=nav> <li><a href=#media-default>Default media</a></li> <li><a href=#media-list>Media list</a></li> </ul> </li> <li> <a href=#list-group>List group</a> <ul class=nav> <li><a href=#list-group-basic>Basic example</a></li> <li><a href=#list-group-badges>Badges</a></li> <li><a href=#list-group-linked>Linked items</a></li> <li><a href=#list-group-buttons>Button items</a></li> <li><a href=#list-group-disabled>Disabled items</a></li> <li><a href=#list-group-contextual-classes>Contextual classes</a></li> <li><a href=#list-group-custom-content>Custom content</a></li> </ul> </li> <li> <a href=#panels>Panels</a> <ul class=nav> <li><a href=#panels-basic>Basic example</a></li> <li><a href=#panels-heading>Panel with heading</a></li> <li><a href=#panels-footer>Panel with footer</a></li> <li><a href=#panels-alternatives>Contextual alternatives</a></li> <li><a href=#panels-tables>With tables</a></li> <li><a href=#panels-list-group>With list groups</a></li> </ul> </li> <li><a href=#responsive-embed>Responsive embed</a></li> <li><a href=#wells>Wells</a></li> </ul> <a href=#top class=back-to-top> Back to top </a> <a href=# class=bs-docs-theme-toggle role=button> Preview theme </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> CSS · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/css/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li class=active> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=overview>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> CSS · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/css/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li class=active> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>CSS</h1> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=overview>Overview</h1> <p class=lead>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <h2 id=overview-doctype>HTML5 doctype</h2> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
<span class=nt><html</span> <span class=na>lang=</span><span class=s>"en"</span><span class=nt>></span>
...
<span class=nt></html></span></code></pre></figure> <h2 id=overview-mobile>Mobile first</h2> <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p> <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1"</span><span class=nt>></span></code></pre></figure> <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><meta</span> <span class=na>name=</span><span class=s>"viewport"</span> <span class=na>content=</span><span class=s>"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class=nt>></span></code></pre></figure> <h2 id=overview-type-links>Typography and links</h2> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <ul> <li>Set <code>background-color: #fff;</code> on the <code>body</code></li> <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li> <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </ul> <p>These styles can be found within <code>scaffolding.less</code>.</p> <h2 id=overview-normalize>Normalize.css</h2> <p>For improved cross-browser rendering, we use <a href=http://necolas.github.io/normalize.css/ rel=noopener target=_blank>Normalize.css</a>, a project by <a href=https://twitter.com/necolas rel=noopener target=_blank>Nicolas Gallagher</a> and <a href=https://twitter.com/jon_neal rel=noopener target=_blank>Jonathan Neal</a>.</p> <h2 id=overview-container>Containers</h2> <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p> <p>Use <code>.container</code> for a responsive fixed width container.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"container"</span><span class=nt>></span>
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Getting started · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/getting-started/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li class=active> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download compiled")'>Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download source")'>Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download Sass")'>Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href=https://www.jsdelivr.com/ >jsDelivr</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.jsdelivr.com/ >Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Getting started · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/getting-started/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li class=active> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=download>Download</h1> <p class=lead>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class=col-sm-4> <h3 id=download-bootstrap>Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download compiled")'>Download Bootstrap</a> </p> </div> <div class=col-sm-4> <h3 id=download-source>Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download source")'>Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download Sass")'>Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href=https://www.jsdelivr.com/ >jsDelivr</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href=https://www.jsdelivr.com/ >Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
<span class=c><!-- Optional theme --></span>
<span class=nt><div</span> <span class=na>class=</span><span class=s>"container"</span> <span class=na>id=</span><span class=s>"content"</span> <span class=na>tabindex=</span><span class=s>"-1"</span><span class=nt>></span>
<span class=c><!-- The main page content --></span>
<span class=nt></div></span>
-<span class=nt></body></span></code></pre></figure> <h2>Nested headings</h2> <p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p> <p>Learn more at <a href=http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/ >HTML CodeSniffer</a> and <a href=http://accessibility.psu.edu/headings>Penn State's AccessAbility</a>.</p> <h2>Color contrast</h2> <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href=../css/#buttons>styled button</a> classes, some of the code highlighting colors used for <a href=../css/#code-block>basic code blocks</a>, the <code>.bg-primary</code> <a href=../css/#helper-classes-backgrounds>contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href=http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast>recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p> <h2>Additional resources</h2> <ul> <li><a href=https://github.com/squizlabs/HTML_CodeSniffer>"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li> <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li> <li><a href=http://www.paciellogroup.com/resources/contrastanalyser/ >Colour Contrast Analyser</a></li> <li><a href=https://a11yproject.com/ >The A11Y Project</a></li> <li><a href=https://developer.mozilla.org/en-US/docs/Accessibility>MDN accessibility documentation</a></li> </ul> </div> <div class=bs-docs-section> <h1 class=page-header id=license-faqs>License FAQs</h1> <p class=lead>Bootstrap is released under the MIT license and is copyright 2016 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p> <h2>It requires you to:</h2> <ul> <li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li> </ul> <h2>It permits you to:</h2> <ul> <li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li> <li>Use Bootstrap in packages or distributions that you create</li> <li>Modify the source code</li> <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li> </ul> <h2>It forbids you to:</h2> <ul> <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li> <li>Hold the creators or copyright holders of Bootstrap liable</li> <li>Redistribute any piece of Bootstrap without proper attribution</li> <li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li> <li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li> </ul> <h2>It does not require you to:</h2> <ul> <li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li> <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li> </ul> <p>The full Bootstrap license is located <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE>in the project repository</a> for more information.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=translations>Translations</h1> <p class=lead>Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p> <ul> <li><a href=https://v3.bootcss.com/ hreflang=zh>Bootstrap 中文文档 (Chinese)</a></li> <li><a href=https://kkbruce.tw/bs3/ hreflang=zh-TW>Bootstrap 3 中文手冊 (Chinese (Traditional))</a></li> <li><a href=http://getbootstrap.dk/ hreflang=da>Bootstrap på Dansk (Danish)</a></li> <li><a href=http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/ hreflang=fr>Bootstrap en Français (French)</a></li> <li><a href=http://holdirbootstrap.de/ hreflang=de>Bootstrap auf Deutsch (German)</a></li> <li><a href=http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/ hreflang=it>Bootstrap in Italiano (Italian)</a></li> <li><a href=http://bootstrapk.com/ hreflang=ko>Bootstrap 한국어 (Korean)</a></li> <li><a href=http://bootstrapbrasil.github.io/ hreflang=pt-BR>Bootstrap em Português do Brasil (Brazilian Portuguese)</a></li> <li><a href=http://www.oneskyapp.com/ru/docs/bootstrap/ hreflang=ru>Bootstrap по-русски (Russian)</a></li> <li><a href=http://www.oneskyapp.com/es/docs/bootstrap/ hreflang=es>Bootstrap en Español (Spanish)</a></li> <li><a href=http://www.trbootstrap.com/ hreflang=tr>Türkçe Bootstrap (Turkish)</a></li> <li><a href=https://twbs.docs.org.ua/ hreflang=uk>Bootstrap українською (Ukrainian)</a></li> <li><a href=http://getbootstrap.com.vn/ hreflang=vi>Bootstrap bằng tiếng Việt (Vietnamese)</a></li> </ul> <p><strong class=text-danger>We don't help organize or host translations, we just link to them.</strong></p> <p>Finished a new or better translation? Open a pull request to add it to our list.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#download>Download</a> </li> <li> <a href=#whats-included>What's included</a> <ul class=nav> <li><a href=#whats-included-precompiled>Precompiled</a></li> <li><a href=#whats-included-source>Source code</a></li> </ul> </li> <li> <a href=#grunt>Compiling CSS and JavaScript</a> <ul class=nav> <li><a href=#grunt-installing>Installing Grunt</a></li> <li><a href=#grunt-commands>Available Grunt commands</a></li> <li><a href=#grunt-troubleshooting>Troubleshooting</a></li> </ul> </li> <li> <a href=#template>Basic template</a> </li> <li> <a href=#examples>Examples</a> <ul class=nav> <li><a href=#examples-framework>Using the framework</a></li> <li><a href=#examples-navbars>Navbars in action</a></li> <li><a href=#examples-custom>Custom components</a></li> <li><a href=#examples-experiments>Experiments</a></li> </ul> </li> <li> <a href=#tools>Tools</a> <ul class=nav> <li><a href=#tools-bootlint>Bootlint</a></li> </ul> </li> <li> <a href=#community>Community</a> </li> <li> <a href=#disable-responsive>Disabling responsiveness</a> </li> <li> <a href=#migration>Migrating from 2.x to 3.0</a> </li> <li> <a href=#support>Browser and device support</a> <ul class=nav> <li><a href=#support-browsers>Supported browsers</a></li> <li><a href=#support-ie8-ie9>Internet Explorer 8-9</a></li> <li><a href=#support-ie8-respondjs>IE8 and Respond.js</a></li> <li><a href=#support-ie8-box-sizing>IE8 and box-sizing</a></li> <li><a href=#support-ie8-font-face>IE8 and @font-face</a></li> <li><a href=#support-ie-compatibility-modes>IE Compatibility modes</a></li> <li><a href=#support-ie10-width>IE10 and Windows (Phone) 8</a></li> <li><a href=#support-safari-percentages>Safari percent rounding</a></li> <li><a href=#support-fixed-position-keyboards>Modals, navbars, and virtual keyboards</a></li> <li><a href=#support-browser-zooming>Browser zooming</a></li> <li><a href=#support-sticky-hover-mobile>Sticky :hover/:focus on mobile</a></li> <li><a href=#support-printing>Printing</a></li> <li><a href=#support-android-stock-browser>Android stock browser</a></li> <li><a href=#support-validators>Validators</a></li> </ul> </li> <li> <a href=#third-parties>Third party support</a> </li> <li> <a href=#accessibility>Accessibility</a> </li> <li> <a href=#license-faqs>License FAQs</a> </li> <li> <a href=#translations>Translations</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
+<span class=nt></body></span></code></pre></figure> <h2>Nested headings</h2> <p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p> <p>Learn more at <a href=http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/ >HTML CodeSniffer</a> and <a href=http://accessibility.psu.edu/headings>Penn State's AccessAbility</a>.</p> <h2>Color contrast</h2> <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href=../css/#buttons>styled button</a> classes, some of the code highlighting colors used for <a href=../css/#code-block>basic code blocks</a>, the <code>.bg-primary</code> <a href=../css/#helper-classes-backgrounds>contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href=http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast>recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p> <h2>Additional resources</h2> <ul> <li><a href=https://github.com/squizlabs/HTML_CodeSniffer>"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li> <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li> <li><a href=http://www.paciellogroup.com/resources/contrastanalyser/ >Colour Contrast Analyser</a></li> <li><a href=https://a11yproject.com/ >The A11Y Project</a></li> <li><a href=https://developer.mozilla.org/en-US/docs/Accessibility>MDN accessibility documentation</a></li> </ul> </div> <div class=bs-docs-section> <h1 class=page-header id=license-faqs>License FAQs</h1> <p class=lead>Bootstrap is released under the MIT license and is copyright 2016 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p> <h2>It requires you to:</h2> <ul> <li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li> </ul> <h2>It permits you to:</h2> <ul> <li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li> <li>Use Bootstrap in packages or distributions that you create</li> <li>Modify the source code</li> <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li> </ul> <h2>It forbids you to:</h2> <ul> <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li> <li>Hold the creators or copyright holders of Bootstrap liable</li> <li>Redistribute any piece of Bootstrap without proper attribution</li> <li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li> <li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li> </ul> <h2>It does not require you to:</h2> <ul> <li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li> <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li> </ul> <p>The full Bootstrap license is located <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE>in the project repository</a> for more information.</p> </div> <div class=bs-docs-section> <h1 class=page-header id=translations>Translations</h1> <p class=lead>Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p> <ul> <li><a href=https://v3.bootcss.com/ hreflang=zh>Bootstrap 中文文档 (Chinese)</a></li> <li><a href=https://kkbruce.tw/bs3/ hreflang=zh-TW>Bootstrap 3 中文手冊 (Chinese (Traditional))</a></li> <li><a href=http://getbootstrap.dk/ hreflang=da>Bootstrap på Dansk (Danish)</a></li> <li><a href=http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/ hreflang=fr>Bootstrap en Français (French)</a></li> <li><a href=http://holdirbootstrap.de/ hreflang=de>Bootstrap auf Deutsch (German)</a></li> <li><a href=http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/ hreflang=it>Bootstrap in Italiano (Italian)</a></li> <li><a href=http://bootstrapk.com/ hreflang=ko>Bootstrap 한국어 (Korean)</a></li> <li><a href=http://bootstrapbrasil.github.io/ hreflang=pt-BR>Bootstrap em Português do Brasil (Brazilian Portuguese)</a></li> <li><a href=http://www.oneskyapp.com/ru/docs/bootstrap/ hreflang=ru>Bootstrap по-русски (Russian)</a></li> <li><a href=http://www.oneskyapp.com/es/docs/bootstrap/ hreflang=es>Bootstrap en Español (Spanish)</a></li> <li><a href=http://www.trbootstrap.com/ hreflang=tr>Türkçe Bootstrap (Turkish)</a></li> <li><a href=https://twbs.docs.org.ua/ hreflang=uk>Bootstrap українською (Ukrainian)</a></li> <li><a href=http://getbootstrap.com.vn/ hreflang=vi>Bootstrap bằng tiếng Việt (Vietnamese)</a></li> </ul> <p><strong class=text-danger>We don't help organize or host translations, we just link to them.</strong></p> <p>Finished a new or better translation? Open a pull request to add it to our list.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#download>Download</a> </li> <li> <a href=#whats-included>What's included</a> <ul class=nav> <li><a href=#whats-included-precompiled>Precompiled</a></li> <li><a href=#whats-included-source>Source code</a></li> </ul> </li> <li> <a href=#grunt>Compiling CSS and JavaScript</a> <ul class=nav> <li><a href=#grunt-installing>Installing Grunt</a></li> <li><a href=#grunt-commands>Available Grunt commands</a></li> <li><a href=#grunt-troubleshooting>Troubleshooting</a></li> </ul> </li> <li> <a href=#template>Basic template</a> </li> <li> <a href=#examples>Examples</a> <ul class=nav> <li><a href=#examples-framework>Using the framework</a></li> <li><a href=#examples-navbars>Navbars in action</a></li> <li><a href=#examples-custom>Custom components</a></li> <li><a href=#examples-experiments>Experiments</a></li> </ul> </li> <li> <a href=#tools>Tools</a> <ul class=nav> <li><a href=#tools-bootlint>Bootlint</a></li> </ul> </li> <li> <a href=#community>Community</a> </li> <li> <a href=#disable-responsive>Disabling responsiveness</a> </li> <li> <a href=#migration>Migrating from 2.x to 3.0</a> </li> <li> <a href=#support>Browser and device support</a> <ul class=nav> <li><a href=#support-browsers>Supported browsers</a></li> <li><a href=#support-ie8-ie9>Internet Explorer 8-9</a></li> <li><a href=#support-ie8-respondjs>IE8 and Respond.js</a></li> <li><a href=#support-ie8-box-sizing>IE8 and box-sizing</a></li> <li><a href=#support-ie8-font-face>IE8 and @font-face</a></li> <li><a href=#support-ie-compatibility-modes>IE Compatibility modes</a></li> <li><a href=#support-ie10-width>IE10 and Windows (Phone) 8</a></li> <li><a href=#support-safari-percentages>Safari percent rounding</a></li> <li><a href=#support-fixed-position-keyboards>Modals, navbars, and virtual keyboards</a></li> <li><a href=#support-browser-zooming>Browser zooming</a></li> <li><a href=#support-sticky-hover-mobile>Sticky :hover/:focus on mobile</a></li> <li><a href=#support-printing>Printing</a></li> <li><a href=#support-android-stock-browser>Android stock browser</a></li> <li><a href=#support-validators>Validators</a></li> </ul> </li> <li> <a href=#third-parties>Third party support</a> </li> <li> <a href=#accessibility>Accessibility</a> </li> <li> <a href=#license-faqs>License FAQs</a> </li> <li> <a href=#translations>Translations</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
<link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon>
<link href=/docs/3.3/favicon.ico rel=icon>
<link rel="canonical" href="https://getbootstrap.com/docs/3.3/">
+ <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
! function(e, t, a, n, c, o, s) {
e.GoogleAnalyticsObject = c, e[c] = e[c] || function() {
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> JavaScript · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/javascript/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li class=active> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=js-overview>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> JavaScript · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/javascript/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href="data:text/css;charset=utf-8," rel=stylesheet data-href=../dist/css/bootstrap-theme.min.css id=bs-theme-stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li class=active> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>JavaScript</h1> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header id=js-overview>Overview</h1> <h2 id=js-individual-compiled>Individual or compiled</h2> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <div class="bs-callout bs-callout-danger" id=callout-overview-not-both> <h4>Using the compiled JavaScript</h4> <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p> </div> <div class="bs-callout bs-callout-danger" id=callout-overview-dependencies> <h4>Plugin dependencies</h4> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=js-data-attrs>Data attributes</h2> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.data-api'</span><span class=p>)</span></code></pre></figure> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=nb>document</span><span class=p>).</span><span class=nx>off</span><span class=p>(</span><span class=s1>'.alert.data-api'</span><span class=p>)</span></code></pre></figure> <div class="bs-callout bs-callout-danger" id=callout-overview-single-data> <h4>Only one plugin per element via data attributes</h4> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> </div> <h2 id=js-programmatic-api>Programmatic API</h2> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'.btn.danger'</span><span class=p>).</span><span class=nx>button</span><span class=p>(</span><span class=s1>'toggle'</span><span class=p>).</span><span class=nx>addClass</span><span class=p>(</span><span class=s1>'fat'</span><span class=p>)</span></code></pre></figure> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>()</span> <span class=c1>// initialized with defaults</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>({</span> <span class=na>keyboard</span><span class=p>:</span> <span class=kc>false</span> <span class=p>})</span> <span class=c1>// initialized with no keyboard</span>
<span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>modal</span><span class=p>(</span><span class=s1>'show'</span><span class=p>)</span> <span class=c1>// initializes and invokes show immediately</span></code></pre></figure> <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <h4>Default settings</h4> <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>modal</span><span class=p>.</span><span class=nx>Constructor</span><span class=p>.</span><span class=nx>DEFAULTS</span><span class=p>.</span><span class=nx>keyboard</span> <span class=o>=</span> <span class=kc>false</span> <span class=c1>// changes default for the modal plugin's `keyboard` option to false</span></code></pre></figure> <h2 id=js-noconflict>No conflict</h2> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=kd>var</span> <span class=nx>bootstrapButton</span> <span class=o>=</span> <span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>button</span><span class=p>.</span><span class=nx>noConflict</span><span class=p>()</span> <span class=c1>// return $.fn.button to previously assigned value</span>
<span class=nx>$</span><span class=p>.</span><span class=nx>fn</span><span class=p>.</span><span class=nx>bootstrapBtn</span> <span class=o>=</span> <span class=nx>bootstrapButton</span> <span class=c1>// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></figure> <h2 id=js-events>Events</h2> <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p> <p>As of 3.0.0, all Bootstrap events are namespaced.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myModal'</span><span class=p>).</span><span class=nx>on</span><span class=p>(</span><span class=s1>'show.bs.modal'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>(</span><span class=nx>e</span><span class=p>)</span> <span class=p>{</span>
<span class=p>}</span>
<span class=p>})</span></code></pre></figure> <h3 id=affix-options>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <div class=table-responsive> <table class="table table-bordered table-striped js-options-table"> <thead> <tr> <th>Name</th> <th>type</th> <th>default</th> <th>description</th> </tr> </thead> <tbody> <tr> <td>offset</td> <td>number | function | object</td> <td>10</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> </tr> <tr> <td>target</td> <td>selector | node | jQuery element</td> <td>the <code>window</code> object</td> <td>Specifies the target element of the affix.</td> </tr> </tbody> </table> </div> <h3 id=affix-methods>Methods</h3> <h4><code>.affix(options)</code></h4> <p>Activates your content as affixed content. Accepts an optional options <code>object</code>.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myAffix'</span><span class=p>).</span><span class=nx>affix</span><span class=p>({</span>
<span class=na>offset</span><span class=p>:</span> <span class=mi>15</span>
-<span class=p>})</span></code></pre></figure> <h4><code>.affix('checkPosition')</code></h4> <p>Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code> classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myAffix'</span><span class=p>).</span><span class=nx>affix</span><span class=p>(</span><span class=s1>'checkPosition'</span><span class=p>)</span></code></pre></figure> <h3 id=affix-events>Events</h3> <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p> <div class=table-responsive> <table class="table table-bordered table-striped bs-events-table"> <thead> <tr> <th>Event Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>affix.bs.affix</td> <td>This event fires immediately before the element has been affixed.</td> </tr> <tr> <td>affixed.bs.affix</td> <td>This event is fired after the element has been affixed.</td> </tr> <tr> <td>affix-top.bs.affix</td> <td>This event fires immediately before the element has been affixed-top.</td> </tr> <tr> <td>affixed-top.bs.affix</td> <td>This event is fired after the element has been affixed-top.</td> </tr> <tr> <td>affix-bottom.bs.affix</td> <td>This event fires immediately before the element has been affixed-bottom.</td> </tr> <tr> <td>affixed-bottom.bs.affix</td> <td>This event is fired after the element has been affixed-bottom.</td> </tr> </tbody> </table> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#js-overview>Overview</a> <ul class=nav> <li><a href=#js-individual-compiled>Individual or compiled</a></li> <li><a href=#js-data-attrs>Data attributes</a></li> <li><a href=#js-programmatic-api>Programmatic API</a></li> <li><a href=#js-noconflict>No conflict</a></li> <li><a href=#js-events>Events</a></li> <li><a href=#js-version-nums>Version numbers</a></li> <li><a href=#js-disabled>When JavaScript is disabled</a></li> <li><a href=#callout-third-party-libs>Third-party libraries</a></li> </ul> </li> <li><a href=#transitions>Transitions</a></li> <li> <a href=#modals>Modal</a> <ul class=nav> <li><a href=#modals-examples>Examples</a></li> <li><a href=#modals-sizes>Sizes</a></li> <li><a href=#modals-remove-animation>Remove animation</a></li> <li><a href=#modals-related-target>Varying content based on trigger button</a></li> <li><a href=#modals-usage>Usage</a></li> <li><a href=#modals-options>Options</a></li> <li><a href=#modals-methods>Methods</a></li> <li><a href=#modals-events>Events</a></li> </ul> </li> <li> <a href=#dropdowns>Dropdown</a> <ul class=nav> <li><a href=#dropdowns-examples>Examples</a></li> <li><a href=#dropdowns-usage>Usage</a></li> <li><a href=#dropdowns-methods>Methods</a></li> <li><a href=#dropdowns-events>Events</a></li> </ul> </li> <li> <a href=#scrollspy>Scrollspy</a> <ul class=nav> <li><a href=#scrollspy-examples>Examples</a></li> <li><a href=#scrollspy-usage>Usage</a></li> <li><a href=#scrollspy-methods>Methods</a></li> <li><a href=#scrollspy-options>Options</a></li> <li><a href=#scrollspy-events>Events</a></li> </ul> </li> <li> <a href=#tabs>Tab</a> <ul class=nav> <li><a href=#tabs-examples>Examples</a></li> <li><a href=#tabs-usage>Usage</a></li> <li><a href=#tabs-methods>Methods</a></li> <li><a href=#tabs-events>Events</a></li> </ul> </li> <li> <a href=#tooltips>Tooltip</a> <ul class=nav> <li><a href=#tooltips-examples>Examples</a></li> <li><a href=#tooltips-usage>Usage</a></li> <li><a href=#tooltips-options>Options</a></li> <li><a href=#tooltips-methods>Methods</a></li> <li><a href=#tooltips-events>Events</a></li> </ul> </li> <li> <a href=#popovers>Popover</a> <ul class=nav> <li><a href=#popovers-examples>Examples</a></li> <li><a href=#popovers-usage>Usage</a></li> <li><a href=#popovers-options>Options</a></li> <li><a href=#popovers-methods>Methods</a></li> <li><a href=#popovers-events>Events</a></li> </ul> </li> <li> <a href=#alerts>Alert</a> <ul class=nav> <li><a href=#alerts-examples>Examples</a></li> <li><a href=#alerts-usage>Usage</a></li> <li><a href=#alerts-methods>Methods</a></li> <li><a href=#alerts-events>Events</a></li> </ul> </li> <li> <a href=#buttons>Button</a> <ul class=nav> <li><a href=#buttons-stateful>Stateful</a></li> <li><a href=#buttons-single-toggle>Single toggle</a></li> <li><a href=#buttons-checkbox-radio>Checkbox / Radio</a></li> <li><a href=#buttons-methods>Methods</a></li> </ul> </li> <li> <a href=#collapse>Collapse</a> <ul class=nav> <li><a href=#collapse-example>Example</a></li> <li><a href=#collapse-example-accordion>Accordion example</a></li> <li><a href=#collapse-usage>Usage</a></li> <li><a href=#collapse-options>Options</a></li> <li><a href=#collapse-methods>Methods</a></li> <li><a href=#collapse-events>Events</a></li> </ul> </li> <li> <a href=#carousel>Carousel</a> <ul class=nav> <li><a href=#carousel-examples>Examples</a></li> <li><a href=#carousel-usage>Usage</a></li> <li><a href=#carousel-options>Options</a></li> <li><a href=#carousel-methods>Methods</a></li> <li><a href=#carousel-events>Events</a></li> </ul> </li> <li> <a href=#affix>Affix</a> <ul class=nav> <li><a href=#affix-examples>Examples</a></li> <li><a href=#affix-usage>Usage</a></li> <li><a href=#affix-options>Options</a></li> <li><a href=#affix-methods>Methods</a></li> <li><a href=#affix-events>Events</a></li> </ul> </li> </ul> <a href=#top class=back-to-top> Back to top </a> <a href=# class=bs-docs-theme-toggle role=button> Preview theme </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
+<span class=p>})</span></code></pre></figure> <h4><code>.affix('checkPosition')</code></h4> <p>Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code> classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.</p> <figure class=highlight><pre><code class=language-js data-lang=js><span class=nx>$</span><span class=p>(</span><span class=s1>'#myAffix'</span><span class=p>).</span><span class=nx>affix</span><span class=p>(</span><span class=s1>'checkPosition'</span><span class=p>)</span></code></pre></figure> <h3 id=affix-events>Events</h3> <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p> <div class=table-responsive> <table class="table table-bordered table-striped bs-events-table"> <thead> <tr> <th>Event Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>affix.bs.affix</td> <td>This event fires immediately before the element has been affixed.</td> </tr> <tr> <td>affixed.bs.affix</td> <td>This event is fired after the element has been affixed.</td> </tr> <tr> <td>affix-top.bs.affix</td> <td>This event fires immediately before the element has been affixed-top.</td> </tr> <tr> <td>affixed-top.bs.affix</td> <td>This event is fired after the element has been affixed-top.</td> </tr> <tr> <td>affix-bottom.bs.affix</td> <td>This event fires immediately before the element has been affixed-bottom.</td> </tr> <tr> <td>affixed-bottom.bs.affix</td> <td>This event is fired after the element has been affixed-bottom.</td> </tr> </tbody> </table> </div> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#js-overview>Overview</a> <ul class=nav> <li><a href=#js-individual-compiled>Individual or compiled</a></li> <li><a href=#js-data-attrs>Data attributes</a></li> <li><a href=#js-programmatic-api>Programmatic API</a></li> <li><a href=#js-noconflict>No conflict</a></li> <li><a href=#js-events>Events</a></li> <li><a href=#js-version-nums>Version numbers</a></li> <li><a href=#js-disabled>When JavaScript is disabled</a></li> <li><a href=#callout-third-party-libs>Third-party libraries</a></li> </ul> </li> <li><a href=#transitions>Transitions</a></li> <li> <a href=#modals>Modal</a> <ul class=nav> <li><a href=#modals-examples>Examples</a></li> <li><a href=#modals-sizes>Sizes</a></li> <li><a href=#modals-remove-animation>Remove animation</a></li> <li><a href=#modals-related-target>Varying content based on trigger button</a></li> <li><a href=#modals-usage>Usage</a></li> <li><a href=#modals-options>Options</a></li> <li><a href=#modals-methods>Methods</a></li> <li><a href=#modals-events>Events</a></li> </ul> </li> <li> <a href=#dropdowns>Dropdown</a> <ul class=nav> <li><a href=#dropdowns-examples>Examples</a></li> <li><a href=#dropdowns-usage>Usage</a></li> <li><a href=#dropdowns-methods>Methods</a></li> <li><a href=#dropdowns-events>Events</a></li> </ul> </li> <li> <a href=#scrollspy>Scrollspy</a> <ul class=nav> <li><a href=#scrollspy-examples>Examples</a></li> <li><a href=#scrollspy-usage>Usage</a></li> <li><a href=#scrollspy-methods>Methods</a></li> <li><a href=#scrollspy-options>Options</a></li> <li><a href=#scrollspy-events>Events</a></li> </ul> </li> <li> <a href=#tabs>Tab</a> <ul class=nav> <li><a href=#tabs-examples>Examples</a></li> <li><a href=#tabs-usage>Usage</a></li> <li><a href=#tabs-methods>Methods</a></li> <li><a href=#tabs-events>Events</a></li> </ul> </li> <li> <a href=#tooltips>Tooltip</a> <ul class=nav> <li><a href=#tooltips-examples>Examples</a></li> <li><a href=#tooltips-usage>Usage</a></li> <li><a href=#tooltips-options>Options</a></li> <li><a href=#tooltips-methods>Methods</a></li> <li><a href=#tooltips-events>Events</a></li> </ul> </li> <li> <a href=#popovers>Popover</a> <ul class=nav> <li><a href=#popovers-examples>Examples</a></li> <li><a href=#popovers-usage>Usage</a></li> <li><a href=#popovers-options>Options</a></li> <li><a href=#popovers-methods>Methods</a></li> <li><a href=#popovers-events>Events</a></li> </ul> </li> <li> <a href=#alerts>Alert</a> <ul class=nav> <li><a href=#alerts-examples>Examples</a></li> <li><a href=#alerts-usage>Usage</a></li> <li><a href=#alerts-methods>Methods</a></li> <li><a href=#alerts-events>Events</a></li> </ul> </li> <li> <a href=#buttons>Button</a> <ul class=nav> <li><a href=#buttons-stateful>Stateful</a></li> <li><a href=#buttons-single-toggle>Single toggle</a></li> <li><a href=#buttons-checkbox-radio>Checkbox / Radio</a></li> <li><a href=#buttons-methods>Methods</a></li> </ul> </li> <li> <a href=#collapse>Collapse</a> <ul class=nav> <li><a href=#collapse-example>Example</a></li> <li><a href=#collapse-example-accordion>Accordion example</a></li> <li><a href=#collapse-usage>Usage</a></li> <li><a href=#collapse-options>Options</a></li> <li><a href=#collapse-methods>Methods</a></li> <li><a href=#collapse-events>Events</a></li> </ul> </li> <li> <a href=#carousel>Carousel</a> <ul class=nav> <li><a href=#carousel-examples>Examples</a></li> <li><a href=#carousel-usage>Usage</a></li> <li><a href=#carousel-options>Options</a></li> <li><a href=#carousel-methods>Methods</a></li> <li><a href=#carousel-events>Events</a></li> </ul> </li> <li> <a href=#affix>Affix</a> <ul class=nav> <li><a href=#affix-examples>Examples</a></li> <li><a href=#affix-usage>Usage</a></li> <li><a href=#affix-options>Options</a></li> <li><a href=#affix-methods>Methods</a></li> <li><a href=#affix-events>Events</a></li> </ul> </li> </ul> <a href=#top class=back-to-top> Back to top </a> <a href=# class=bs-docs-theme-toggle role=button> Preview theme </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Migrating to v3.x · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/migration/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href=https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ >what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href=http://twitter.github.io/typeahead.js/ >Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href=http://bootply.com/ >Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
+<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content="IE=edge" http-equiv=X-UA-Compatible> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description> <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author> <title> Migrating to v3.x · Bootstrap </title> <link rel="canonical" href="https://getbootstrap.com/docs/3.3/migration/"> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script> <!--[if lt IE 9]> <script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script> <script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script> <![endif]--> <link href=/docs/3.3/apple-touch-icon.png rel=apple-touch-icon> <link href=/docs/3.3/favicon.ico rel=icon> <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("set","anonymizeIp",true),ga("send","pageview")</script> </head> <body> <a href=#content class="sr-only sr-only-focusable" id=skippy><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=https://getbootstrap.com/ class=v4-tease>Bootstrap 4 is here!</a> <header class="bs-docs-nav navbar navbar-static-top" id=top> <div class=container> <div class=navbar-header> <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav class="collapse navbar-collapse" id=bs-navbar> <ul class="nav navbar-nav"> <li> <a href=../getting-started/ >Getting started</a> </li> <li> <a href=../css/ >CSS</a> </li> <li> <a href=../components/ >Components</a> </li> <li> <a href=../javascript/ >JavaScript</a> </li> <li> <a href=../customize/ >Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=https://themes.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li> <li><a href=https://expo.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li> <li><a href=https://blog.getbootstrap.com/ onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Migrating to v3.x</h1> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> </div> </div> <div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 class=page-header>Migrating from 2.x to 3.0</h1> <p class=lead>Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href=https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ >what's new</a> in the v3.0 release announcement.</p> <h2 id=classes>Major class changes</h2> <p>This table shows the style changes between v2.x and v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Bootstrap 2.x</th> <th>Bootstrap 3.0</th> </tr> </thead> <tbody> <tr> <td><code>.row-fluid</code></td> <td><code>.row</code></td> </tr> <tr> <td><code>.span*</code></td> <td><code>.col-md-*</code></td> </tr> <tr> <td><code>.offset*</code></td> <td><code>.col-md-offset-*</code></td> </tr> <tr> <td><code>.brand</code></td> <td><code>.navbar-brand</code></td> </tr> <tr> <td><code>.navbar .nav</code></td> <td><code>.navbar-nav</code></td> </tr> <tr> <td><code>.nav-collapse</code></td> <td><code>.navbar-collapse</code></td> </tr> <tr> <td><code>.nav-toggle</code></td> <td><code>.navbar-toggle</code></td> </tr> <tr> <td><code>.btn-navbar</code></td> <td><code>.navbar-btn</code></td> </tr> <tr> <td><code>.hero-unit</code></td> <td><code>.jumbotron</code></td> </tr> <tr> <td><code>.icon-*</code></td> <td><code>.glyphicon .glyphicon-*</code></td> </tr> <tr> <td><code>.btn</code></td> <td><code>.btn .btn-default</code></td> </tr> <tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div> <h2 id=new>What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (<768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (≥768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (≥992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (≥1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (≥1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td> </tr> <tr> <td>Navbar header</td> <td><code>.navbar-header</code></td> </tr> <tr> <td>Justified tabs / pills</td> <td><code>.nav-justified</code></td> </tr> <tr> <td>Responsive images</td> <td><code>.img-responsive</code></td> </tr> <tr> <td>Contextual table rows</td> <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td> </tr> <tr> <td>Contextual panels</td> <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> </tr> <tr> <td>Modal</td> <td><code>.modal-dialog</code> <code>.modal-content</code></td> </tr> <tr> <td>Thumbnail image</td> <td><code>.img-thumbnail</code></td> </tr> <tr> <td>Well sizes</td> <td><code>.well-sm</code> <code>.well-lg</code></td> </tr> <tr> <td>Alert links</td> <td><code>.alert-link</code></td> </tr> </tbody> </table> </div> <h2 id=dropped>What's removed</h2> <p>The following elements have been dropped or changed in v3.0.</p> <div class=table-responsive> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Removed from 2.x</th> <th>3.0 Equivalent</th> </tr> </thead> <tbody> <tr> <td>Form actions</td> <td><code>.form-actions</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Search form</td> <td><code>.form-search</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Form group with info</td> <td><code>.control-group.info</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fixed-width input sizes</td> <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td> <td>Use <a href=../css/#forms-controls><code>.form-control</code></a> and <a href=../css/#grid>the grid system</a> instead.</td> </tr> <tr> <td>Block level form input</td> <td><code>.input-block-level</code></td> <td>No direct equivalent, but <a href=../css/#forms-controls>forms controls</a> are similar.</td> </tr> <tr> <td>Inverse buttons</td> <td><code>.btn-inverse</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Fluid row</td> <td><code>.row-fluid</code></td> <td><code>.row</code> (no more fixed grid)</td> </tr> <tr> <td>Controls wrapper</td> <td><code>.controls</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Controls row</td> <td><code>.controls-row</code></td> <td><code>.row</code> or <code>.form-group</code></td> </tr> <tr> <td>Navbar inner</td> <td><code>.navbar-inner</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Navbar vertical dividers</td> <td><code>.navbar .divider-vertical</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Dropdown submenu</td> <td><code>.dropdown-submenu</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Tab alignments</td> <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> <td class=text-muted>N/A</td> </tr> <tr> <td>Pill-based tabbable area</td> <td><code>.pill-content</code></td> <td><code>.tab-content</code></td> </tr> <tr> <td>Pill-based tabbable area pane</td> <td><code>.pill-pane</code></td> <td><code>.tab-pane</code></td> </tr> <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href=../components/#list-group>list groups</a> and <a href=../javascript/#collapse><code>.panel-group</code>s</a> are similar.</td> </tr> <tr> <td>Inline help for form controls</td> <td><code>.help-inline</code></td> <td>No exact equivalent, but <code>.help-block</code> is similar.</td> </tr> <tr> <td>Non-bar-level progress colors</td> <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td> <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td> </tr> </tbody> </table> </div> <h2 id=notes>Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.row</code> is now fluid.</li> <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code><img></code> size.</li> <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li> <li>Typeahead has been dropped, in favor of using <a href=http://twitter.github.io/typeahead.js/ >Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li> <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li> <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href=http://bootply.com/ >Bootply</a>.</p> </div> </div> <div class=col-md-3 role=complementary> <nav class="bs-docs-sidebar hidden-print hidden-sm hidden-xs"> <ul class="nav bs-docs-sidenav"> <li> <a href=#classes>Major class changes</a> </li> <li> <a href=#new>What's new</a> </li> <li> <a href=#dropped>What's removed</a> </li> <li> <a href=#notes>Additional notes</a> </li> </ul> <a href=#top class=back-to-top> Back to top </a> </nav> </div> </div> </div> <footer class=bs-docs-footer> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href=../about/ >About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo rel=noopener target=_blank>@mdo</a> and <a href=https://twitter.com/fat rel=noopener target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/main/LICENSE target=_blank rel="license noopener">MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> <script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src=../dist/js/bootstrap.min.js></script> <script src=../assets/js/docs.min.js></script> <script src=../assets/js/ie10-viewport-bug-workaround.js></script>
\ No newline at end of file
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<h2 id="team-core">Core team</h2>
<div class="list-group bs-team">
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/mdo">
<img src="https://github.com/mdo.png?s=64" alt="@mdo avatar" width="32" height="32">
<strong>Mark Otto</strong> <small>@mdo</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/fat">
<img src="https://github.com/fat.png?s=64" alt="@fat avatar" width="32" height="32">
<strong>Jacob Thornton</strong> <small>@fat</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/cvrebert">
<img src="https://github.com/cvrebert.png?s=64" alt="@cvrebert avatar" width="32" height="32">
<strong>Chris Rebert</strong> <small>@cvrebert</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png?s=64" alt="@xhmikosr avatar" width="32" height="32">
<strong>XhmikosR</strong> <small>@xhmikosr</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png?s=64" alt="@patrickhlauke avatar" width="32" height="32">
<strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png?s=64" alt="@johann-s avatar" width="32" height="32">
<strong>Johann-S</strong> <small>@johann-s</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/andresgalante">
<img src="https://github.com/andresgalante.png?s=64" alt="@andresgalante avatar" width="32" height="32">
<strong>Andres Galante</strong> <small>@andresgalante</small>
</a>
</div>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v3.4.1/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<h2 id="team-sass">Sass team</h2>
<div class="list-group bs-team">
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/thomas-mcdonald">
<img src="https://github.com/thomas-mcdonald.png?s=64" alt="@thomas-mcdonald avatar" width="32" height="32">
<strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small>
</a>
</div>
-
+
<div class="list-group-item">
<a class="team-member" href="https://github.com/glebm">
<img src="https://github.com/glebm.png?s=64" alt="@glebm avatar" width="32" height="32">
<strong>Gleb Mazovetskiy</strong> <small>@glebm</small>
</a>
</div>
-
+
</div>
<p>The <a href="https://github.com/twbs/bootstrap-sass">official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href="https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how the Sass port is developed.</p>
</div>
</div>
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#history">History</a>
</li>
<a href="#brand">Brand guidelines</a>
</li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20755">#20755</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18692">#18692</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14528">#14528</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16671">#16671</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18504">#18504</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18543">#18543</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18228">#18228</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18365">#18365</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19839">#19839</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20161">#20161</a>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/15990">#15990</a>
</td>
</tr>
-
+
<tr>
<td>Firefox (OS X & Linux)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19626">#19626</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (Android)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17338">#17338</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (OS X)
</td>
<td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14409">#14409</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16022">#16022</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>, <a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19810">#19810</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (Windows & Linux)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/15298">#15298</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14975">#14975</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14603">#14603</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14708">#14708</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16988">#16988</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>, <a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16028">#16028</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18859">#18859</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17497">#17497</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19927">#19927</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17695">#17695</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18738">#18738</a>
</td>
</tr>
-
+
</tbody>
</table>
</div>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17021">#17021</a>
</td>
</tr>
-
+
<tr>
<td>Microsoft Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1182856">Mozilla bug #1182856</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17021">#17021</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
</tbody>
</table>
</div>
</div>
</div>
-
+
</div>
</div>
<!-- Optional Bootstrap Theme -->
-
+
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
+
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="https://www.glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="https://www.glyphicons.com/">Glyphicons</a> whenever possible.</p>
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
-
+
<li>
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-plus</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-euro</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-eur" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-eur</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-minus</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-envelope</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-pencil</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-glass</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-music</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-search</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-heart</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-star</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-user</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-film" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-film</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-th-large</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-th</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-th-list</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-off</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-signal</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cog</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-trash</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-home</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-file</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-time</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-road</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-download" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-download</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-upload</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-inbox</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-repeat</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-refresh</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-lock</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-flag</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-headphones</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-barcode</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tag</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tags</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-book</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-print</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-camera</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-font" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-font</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bold</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-italic</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-text-height" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-height</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-width</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-center</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-list</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-indent-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-indent-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-picture</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-adjust</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tint" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tint</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-edit</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-share</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-check</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-move</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-backward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-backward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-play</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-pause</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-stop</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-forward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-forward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-eject" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-eject</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-gift</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-leaf</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-fire</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-plane</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-calendar</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-random" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-random</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-comment</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-magnet" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-magnet</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-retweet</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hdd</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bell</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-certificate</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hand-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-globe</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-wrench</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tasks</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-filter</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-link</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-phone</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-usd</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-gbp" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-gbp</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-expand" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-expand</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-collapse-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-log-in</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-flash</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-log-out</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-new-window</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-record</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-save" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-save</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-open</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-saved</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-import" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-import</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-export" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-export</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-send</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-floppy-open" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-transfer</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-header" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-header</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-compressed" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-compressed</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-earphone</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tower" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tower</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-stats</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sound-dolby" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sound-6-1" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-registration-mark" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cd</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-save-file" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-save-file</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-open-file" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-open-file</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-level-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-level-up</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-copy</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-paste" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-paste</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-alert</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-equalizer</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-king" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-king</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-queen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-queen</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-pawn" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-pawn</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bishop" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bishop</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-knight" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-knight</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-baby-formula" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-baby-formula</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-tent" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tent</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-blackboard</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bed" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bed</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-apple</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-erase</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hourglass</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-lamp</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-duplicate</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-piggy-bank</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-scissors</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bitcoin</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-btc" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-btc</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-xbt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-xbt</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-yen</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-jpy" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-jpy</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ruble" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ruble</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-rub" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-rub</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-scale" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-scale</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ice-lolly" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ice-lolly</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ice-lolly-tasted</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-education" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-education</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-option-horizontal</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-option-vertical</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-hamburger</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-modal-window</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-oil" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-oil</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-grain" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-grain</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sunglasses</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-size</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-text-color" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-color</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-text-background" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-background</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-top" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-top</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-bottom</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-horizontal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-horizontal</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-vertical" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-vertical</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-object-align-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-bottom</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-top</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-console</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-superscript</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-subscript</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-left</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-right</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-down</span>
</li>
-
+
<li>
<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-up</span>
</li>
-
+
</ul>
</div>
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#glyphicons">Glyphicons</a>
<ul class="nav">
<li><a href="#responsive-embed">Responsive embed</a></li>
<li><a href="#wells">Wells</a></li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
<a href="#" class="bs-docs-theme-toggle" role="button">
Preview theme
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<!-- Optional Bootstrap Theme -->
-
+
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
+
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#overview">Overview</a>
<ul class="nav">
</ul>
</li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
<a href="#" class="bs-docs-theme-toggle" role="button">
Preview theme
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<h1 id="less-variables" class="page-header">Less variables</h1>
<p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
-
+
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.pug template.-->
<h2 id="colors">Colors</h2>
<p>Gray and brand colors for use across Bootstrap.</p>
</form>
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
-
+
+
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.pug template.-->
<li><a href="#import-drop-target">Import</a></li>
<li><a href="#less">Less components</a></li>
</li>
<li><a href="#download">Download</a></li>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.pug template.-->
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<script>var __configBridge = {"autoprefixer":{"browsers":["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],"cascade":false},"jqueryCheck":["if (typeof jQuery === 'undefined') {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery')","}\n"],"jqueryVersionCheck":["+function ($) {"," 'use strict';"," var version = $.fn.jquery.split(' ')[0].split('.')"," if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')"," }","}(jQuery);\n\n"]}</script>
-
+
<script src="/docs/3.4/assets/js/customize.min.js"></script>
-
+
</body>
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p>
<ul>
-
+
<li><a href="https://v3.bootcss.com/" hreflang="zh">Bootstrap 中文文档 (Chinese)</a></li>
-
+
<li><a href="http://getbootstrap.dk/" hreflang="da">Bootstrap på Dansk (Danish)</a></li>
-
+
<li><a href="http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/" hreflang="fr">Bootstrap en Français (French)</a></li>
-
+
<li><a href="http://holdirbootstrap.de/" hreflang="de">Bootstrap auf Deutsch (German)</a></li>
-
+
<li><a href="https://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/" hreflang="it">Bootstrap in Italiano (Italian)</a></li>
-
+
<li><a href="http://bootstrapk.com/" hreflang="ko">Bootstrap 한국어 (Korean)</a></li>
-
+
<li><a href="https://getbootstrap.com.br/" hreflang="pt-BR">Bootstrap em Português do Brasil (Brazilian Portuguese)</a></li>
-
+
<li><a href="http://www.oneskyapp.com/ru/docs/bootstrap/" hreflang="ru">Bootstrap по-русски (Russian)</a></li>
-
+
<li><a href="http://www.oneskyapp.com/es/docs/bootstrap/" hreflang="es">Bootstrap en Español (Spanish)</a></li>
-
+
<li><a href="http://www.trbootstrap.com" hreflang="tr">Türkçe Bootstrap (Turkish)</a></li>
-
+
<li><a href="https://twbs.docs.org.ua/" hreflang="uk">Bootstrap українською (Ukrainian)</a></li>
-
+
<li><a href="http://getbootstrap.com.vn" hreflang="vi">Bootstrap bằng tiếng Việt (Vietnamese)</a></li>
-
+
</ul>
<p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#download">Download</a>
</li>
<a href="#translations">Translations</a>
</li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<hr class="half-rule">
<div class="row bs-docs-featured-sites">
-
+
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0">
<a href="https://expo.getbootstrap.com/2014/10/29/lyft/" rel="noopener" target="_blank" title="Lyft">
<img src="/docs/3.4/assets/img/expo-lyft.jpg" alt="Lyft" class="img-responsive" width="800" height="600">
</a>
</div>
-
+
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0">
<a href="https://expo.getbootstrap.com/2014/09/30/vogue/" rel="noopener" target="_blank" title="Vogue">
<img src="/docs/3.4/assets/img/expo-vogue.jpg" alt="Vogue" class="img-responsive" width="800" height="600">
</a>
</div>
-
+
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0">
<a href="https://expo.getbootstrap.com/2014/02/12/newsweek/" rel="noopener" target="_blank" title="Newsweek">
<img src="/docs/3.4/assets/img/expo-newsweek.jpg" alt="Newsweek" class="img-responsive" width="800" height="600">
</a>
</div>
-
+
</div>
<hr class="half-rule">
<!-- Optional Bootstrap Theme -->
-
+
<link href="data:text/css;charset=utf-8," data-href="/docs/3.4/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-
+
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#js-overview">Overview</a>
<ul class="nav">
</ul>
</li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
<a href="#" class="bs-docs-theme-toggle" role="button">
Preview theme
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<link rel="apple-touch-icon" href="/docs/3.4/apple-touch-icon.png">
<link rel="icon" href="/docs/3.4/favicon.ico">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
</div>
-
+
<div class="col-md-3" role="complementary">
<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
<form class="bs-docs-search">
</form>
<ul class="nav bs-docs-sidenav">
-
+
<li>
<a href="#classes">Major class changes</a>
</li>
<a href="#notes">Additional notes</a>
</li>
-
+
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
-
+
</nav>
</div>
-
+
</div>
</div>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
Introduction
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
-
+
</li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Overview
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
-
+
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Reboot
</a>
-
+
</li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
-
+
</li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
-
+
</li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
-
+
</li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
-
+
</li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Alerts
</a>
-
+
</li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
-
+
</li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
-
+
</li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
-
+
</li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
-
+
</li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
-
+
</li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
-
+
</li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
-
+
</li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
-
+
</li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
-
+
</li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
-
+
</li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
-
+
</li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
-
+
</li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
-
+
</li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
-
+
</li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
-
+
</li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
-
+
</li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
-
+
</li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Borders
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
-
+
</li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Icons
</a>
-
+
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
History
</a>
-
+
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/about/team/">
Team
</a>
-
+
</li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
-
+
</li><li>
<a href="/docs/4.0/about/license/">
License
</a>
-
+
</li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
-
+
</li></ul>
</div></nav>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Team</h1>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group bd-team">
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe>
<a class="team-member" href="https://github.com/mdo">
<strong>Mark Otto</strong> <small>@mdo</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe>
<a class="team-member" href="https://github.com/fat">
<strong>Jacob Thornton</strong> <small>@fat</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe>
<a class="team-member" href="https://github.com/cvrebert">
<strong>Chris Rebert</strong> <small>@cvrebert</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe>
<a class="team-member" href="https://github.com/juthilo">
<strong>Julian Thilo</strong> <small>@juthilo</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=xhmikosr&type=follow"></iframe>
<a class="team-member" href="https://github.com/xhmikosr">
<strong>XhmikosR</strong> <small>@xhmikosr</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=hnrch02&type=follow"></iframe>
<a class="team-member" href="https://github.com/hnrch02">
<strong>Heinrich Fenkart</strong> <small>@hnrch02</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=patrickhlauke&type=follow"></iframe>
<a class="team-member" href="https://github.com/patrickhlauke">
<strong>Patrick H. Lauke</strong> <small>@patrickhlauke</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=thomas-mcdonald&type=follow"></iframe>
<a class="team-member" href="https://github.com/thomas-mcdonald">
<strong>Thomas McDonald</strong> <small>@thomas-mcdonald</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=glebm&type=follow"></iframe>
<a class="team-member" href="https://github.com/glebm">
<strong>Gleb Mazovetskiy</strong> <small>@glebm</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=johann-s&type=follow"></iframe>
<a class="team-member" href="https://github.com/johann-s">
<strong>Johann-S</strong> <small>@johann-s</small>
</a>
</div>
-
+
<div class="list-group-item">
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=andresgalante&type=follow"></iframe>
<a class="team-member" href="https://github.com/andresgalante">
<strong>Andres Galante</strong> <small>@andresgalante</small>
</a>
</div>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20755">#20755</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18692">#18692</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16671">#16671</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18504">#18504</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18543">#18543</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18228">#18228</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20507">#20507</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18365">#18365</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19839">#19839</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/21092">#21092</a>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/15990">#15990</a>
</td>
</tr>
-
+
<tr>
<td>Firefox (OS X & Linux)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19626">#19626</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (Android)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17338">#17338</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (OS X)
</td>
<td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> & <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14409">#14409</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>, <a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19810">#19810</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20161">#20161</a>
</td>
</tr>
-
+
<tr>
<td>Chrome (Windows & Linux)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/15298">#15298</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/24673">#24673</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/25166">#25166</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (OS X)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14603">#14603</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14708">#14708</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16988">#16988</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>, <a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16028">#16028</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18859">#18859</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17497">#17497</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/17695">#17695</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20759">#20759</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/18738">#18738</a>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=437860">Chromium issue #437860</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>This is a primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>This is a secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>This is a success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>This is a primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>This is a secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>This is a success list group item<span class="nt"></a></span>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-typography">Responsive typography</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</header>
-
+
<main id="content" role="main">
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
</header>
<main class="bd-content p-5" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.0/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
</main>
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Extend</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#util">Util</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in our <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-primary">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-secondary">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-success">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-danger">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-warning">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-info">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-light">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-dark">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#border-radius">Border-radius</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screenreaders</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#font-weight-and-italics">Font weight and italics</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (macOS & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (Android)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (macOS)
</td>
of
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
-
+
&
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (Windows & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+
-
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+
+
+ <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
- <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+
-
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+
-
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+
-
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+
-
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+
-
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+
-
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+
-
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
</td>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-typography">Responsive typography</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Extend</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#util">Util</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstraps’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-primary">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-secondary">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-success">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-danger">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-warning">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-info">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-light">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-dark">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-visibility">Toggle visibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#border-radius">Border-radius</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<p>The <code class="highlighter-rouge">text-hide()</code> class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.</p>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screenreaders</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Shadows</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#monospace">Monospace</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Team</h1>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group mb-3">
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Chris Rebert</strong> @cvrebert
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" />
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Gleb Mazovetskiy</strong> @glebm
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Andres Galante</strong> @andresgalante
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.2.1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (macOS & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (macOS)
</td>
of
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
-
+
&
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+
-
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+
+
+ <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
- <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+
-
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+
-
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+
-
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+
-
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+
-
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+
-
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+
-
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
</td>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">Buttons</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spinners</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Toasts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-typography">Responsive typography</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/jumbotron.png,
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.2/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/offcanvas.png,
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#util">Util</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstraps’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-primary">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-secondary">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-success">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-danger">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-warning">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-info">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-light">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-dark">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-visibility">Toggle visibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#border-radius">Border-radius</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
<li class="toc-entry toc-h2"><a href="#background-gradient">Background gradient</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overflow</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screenreaders</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Shadows</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
<li class="toc-entry toc-h2"><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#text-decoration">Text decoration</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Team</h1>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group mb-3">
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Chris Rebert</strong> @cvrebert
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" />
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Gleb Mazovetskiy</strong> @glebm
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Andres Galante</strong> @andresgalante
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.3.1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (macOS & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (macOS)
</td>
of
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
-
+
&
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+
-
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+
+
+ <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
- <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+
-
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+
-
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+
-
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+
-
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+
-
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+
-
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+
-
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
</td>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">Buttons</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spinners</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Toasts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-font-sizes">Responsive font sizes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/jumbotron.png,
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.3/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/offcanvas.png,
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#sanitizer">Sanitizer</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstraps’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-primary">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-secondary">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-success">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-danger">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-warning">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-info">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-light">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-dark">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-visibility">Toggle visibility</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
<li class="toc-entry toc-h2"><a href="#background-gradient">Background gradient</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overflow</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screen readers</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Shadows</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
<li class="toc-entry toc-h2"><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Stretched link</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#text-decoration">Text decoration</a></li>
</ul>
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Team</h1>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group mb-3">
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Chris Rebert</strong> @cvrebert
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" />
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Gleb Mazovetskiy</strong> @glebm
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Andres Galante</strong> @andresgalante
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" />
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.4.1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (macOS & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (macOS)
</td>
of
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
-
+
&
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+
-
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+
+
+ <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
- <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+
-
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+
-
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+
-
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+
-
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+
-
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+
-
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+
-
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
</td>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Alerts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Badges</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Button group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Cards</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Collapse</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Dropdowns</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Input group</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Jumbotron</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">List group</h1>
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Media object</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Pagination</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Popovers</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Progress</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Scrollspy</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">Buttons</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spinners</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Toasts</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tooltips</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-font-sizes">Responsive font sizes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/jumbotron.png,
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.4/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.4/assets/img/examples/offcanvas.png,
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Approach</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Icons</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Browsers and devices</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Download</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#sanitizer">Sanitizer</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">JavaScript</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-white">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Grid system</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overview</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-visibility">Toggle visibility</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Migrating to v4</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Borders</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Clearfix</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Close icon</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
<li class="toc-entry toc-h2"><a href="#background-gradient">Background gradient</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Colors</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Display property</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Embeds</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Flex</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Float</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Image replacement</h1>
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Overflow</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Position</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Screen readers</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Shadows</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
<li class="toc-entry toc-h2"><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Sizing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Stretched link</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#text-decoration">Text decoration</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Text</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Vertical alignment</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Visibility</h1>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group mb-3">
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Chris Rebert</strong> @cvrebert
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Gleb Mazovetskiy</strong> @glebm
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Andres Galante</strong> @andresgalante
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ysds">
<img src="https://github.com/ysds.png" alt="@ysds" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Shohei Yoshida</strong> @ysds
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded mr-2" loading="lazy" />
<span>
<strong>Gaël Poupard</strong> @ffoodd
</span>
</a>
-
+
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.5.3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p class="bd-lead"></p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-danger">
<h5 id="outdated-content">Outdated content</h5>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (Windows)
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox (macOS & Linux)
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome (macOS)
</td>
of
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
-
+
&
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Weird button behavior with some <code class="language-plaintext highlighter-rouge"><input type="number"></code> elements.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
+
-
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
+
+
+ <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
- <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
-
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
</td>
</tr>
-
+
<tr>
<td>Safari (macOS)
</td>
<td><p>Small font size when printing webpage with fixed-width <code class="language-plaintext highlighter-rouge">.container</code>.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
+
-
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="language-plaintext highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
+
-
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
+
-
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="language-plaintext highlighter-rouge"><input type="text"></code></p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
+
-
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p><code class="language-plaintext highlighter-rouge">display: block</code> causes text of temporal <code class="language-plaintext highlighter-rouge"><input></code>s to become vertically misaligned</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
+
-
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
</td>
<td>
- <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+ <a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
+
-
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
<td><p>Tapping into an <code class="language-plaintext highlighter-rouge"><input></code> within a <code class="language-plaintext highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
+
-
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iOS)
</td>
</td>
</tr>
-
+
<tr>
<td>Safari (iPad Pro)
</td>
<td><p>Rendering of descendants of <code class="language-plaintext highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
</td>
<td>
- <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
+
-
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
</td>
</td>
</tr>
-
+
</tbody>
</table>
</tr>
</thead>
<tbody>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Edge
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Firefox
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Chrome
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
<tr>
<td>Safari
</td>
</td>
</tr>
-
+
</tbody>
</table>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
-
+
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
-
+
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
-
+
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#animated-stripes">Animated stripes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#buttons">Buttons</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#inline-code">Inline code</a></li>
<li class="toc-entry toc-h2"><a href="#sample-output">Sample output</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#approach">Approach</a></li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<span class="c"><!-- On cells (`td` or `th`) --></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-active"</span><span class="nt">></span>...<span class="nt"></td></span>
-
+
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-primary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-secondary"</span><span class="nt">></span>...<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"table-success"</span><span class="nt">></span>...<span class="nt"></td></span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#global-settings">Global settings</a></li>
<li class="toc-entry toc-h2"><a href="#responsive-font-sizes">Responsive font sizes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/album/">
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/sticky-footer-navbar.png,
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
-
+
<h2>Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/starter-template/">
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/jumbotron.png,
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
-
+
<h2>Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbars/">
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/navbar-bottom.png,
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
-
+
<h2>Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
-
+
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/floating-labels/">
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
-
+
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.5/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.5/assets/img/examples/offcanvas.png,
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
+
<hr class="my-5">
</main>
-
+
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
<li class="toc-entry toc-h2"><a href="#sanitizer">Sanitizer</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
-
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-blue">Blue</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-purple">Purple</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-pink">Pink</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-red">Red</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-orange">Orange</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-green">Green</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-teal">Teal</div>
</div>
-
-
-
+
+
+
<div class="col-md-4">
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
</div>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-white">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 swatch-100">100</div>
-
+
<div class="p-3 swatch-200">200</div>
-
+
<div class="p-3 swatch-300">300</div>
-
+
<div class="p-3 swatch-400">400</div>
-
+
<div class="p-3 swatch-500">500</div>
-
+
<div class="p-3 swatch-600">600</div>
-
+
<div class="p-3 swatch-700">700</div>
-
+
<div class="p-3 swatch-800">800</div>
-
+
<div class="p-3 swatch-900">900</div>
-
+
</div>
</div>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#containers">Containers</a>
<li class="toc-entry toc-h2"><a href="#z-index">Z-index</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#changing-display">Changing display</a></li>
<li class="toc-entry toc-h2"><a href="#toggle-visibility">Toggle visibility</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#border">Border</a>
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#color">Color</a></li>
<li class="toc-entry toc-h2"><a href="#background-gradient">Background gradient</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p class="bd-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-info">
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
+
<div class="bd-callout bd-callout-warning">
<h5 id="warning">Warning</h5>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#common-values">Common values</a></li>
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#relative-to-the-parent">Relative to the parent</a></li>
<li class="toc-entry toc-h2"><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
</li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
<li class="toc-entry toc-h2"><a href="#text-decoration">Text decoration</a></li>
</ul>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
<img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>GeoSot</strong> @geosot
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
<img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Rohit Sharma</strong> @rohit2sharma95
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
<img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>alpadev</strong> @alpadev
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Gaël Poupard</strong> @ffoodd
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" loading="lazy">
<span>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
</tr>
</tbody>
</table>
-
+
<h1 id="most-wanted-features">Most wanted features</h1>
<p>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren’t yet implemented in certain browsers, thus preventing us from taking advantage of them.</p>
<p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p>
</tr>
</tbody>
</table>
-
+
</main>
</div>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<td>Cell</td>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
-
+
</div>
</div>
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
-
+
<div class="d-flex flex-column flex-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v4.6.1/bootstrap-4.6.1-examples.zip" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v4.6.1.zip" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</header>
<main class="bd-content p-5" id="content" role="main">
-
+
<h2>Custom Components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/sticky-footer-navbar.png,
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/jumbotron.png,
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/navbar-bottom.png,
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.6/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/4.6/assets/img/examples/offcanvas.png,
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
-
-
+
+
<hr class="my-5">
<div class="container">
<div class="text-center">
src="/docs/4.6/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1151" height="320" loading="lazy">
</div>
-
+
</main>
<footer class="bd-footer text-muted">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<h3 id="all-colors">All colors</h3>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-blue">
<strong class="d-block">$blue</strong>
<small>#007bff</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-indigo">
<strong class="d-block">$indigo</strong>
<small>#6610f2</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-purple">
<strong class="d-block">$purple</strong>
<small>#6f42c1</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-pink">
<strong class="d-block">$pink</strong>
<small>#e83e8c</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-red">
<strong class="d-block">$red</strong>
<small>#dc3545</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-orange">
<strong class="d-block">$orange</strong>
<small>#fd7e14</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-yellow">
<strong class="d-block">$yellow</strong>
<small>#ffc107</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-green">
<strong class="d-block">$green</strong>
<small>#28a745</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-teal">
<strong class="d-block">$teal</strong>
<small>#20c997</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-cyan">
<strong class="d-block">$cyan</strong>
<small>#17a2b8</small>
</div>
</div>
-
+
</div>
<p>Here’s how you can use these in your Sass:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// With variable
<h3 id="theme-colors">Theme colors</h3>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-primary text-white">
<strong class="d-block">$primary</strong>
<small>#007bff</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-secondary text-white">
<strong class="d-block">$secondary</strong>
<small>#6c757d</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-success text-white">
<strong class="d-block">$success</strong>
<small>#28a745</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-danger text-white">
<strong class="d-block">$danger</strong>
<small>#dc3545</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-warning text-dark">
<strong class="d-block">$warning</strong>
<small>#ffc107</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-info text-white">
<strong class="d-block">$info</strong>
<small>#17a2b8</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-light text-dark">
<strong class="d-block">$light</strong>
<small>#f8f9fa</small>
</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-dark text-white">
<strong class="d-block">$dark</strong>
<small>#343a40</small>
</div>
</div>
-
+
</div>
<h3 id="grays">Grays</h3>
<p>An expansive set of gray variables and a Sass map in <code>scss/_variables.scss</code> for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.</p>
<div class="row mb-3">
<div class="col-md-4">
-
+
<div class="p-3 text-monospace swatch-100">
<strong class="d-block">$gray-100</strong>
<small>#f8f9fa</small>
</div>
-
+
<div class="p-3 text-monospace swatch-200">
<strong class="d-block">$gray-200</strong>
<small>#e9ecef</small>
</div>
-
+
<div class="p-3 text-monospace swatch-300">
<strong class="d-block">$gray-300</strong>
<small>#dee2e6</small>
</div>
-
+
<div class="p-3 text-monospace swatch-400">
<strong class="d-block">$gray-400</strong>
<small>#ced4da</small>
</div>
-
+
<div class="p-3 text-monospace swatch-500">
<strong class="d-block">$gray-500</strong>
<small>#adb5bd</small>
</div>
-
+
<div class="p-3 text-monospace swatch-600">
<strong class="d-block">$gray-600</strong>
<small>#6c757d</small>
</div>
-
+
<div class="p-3 text-monospace swatch-700">
<strong class="d-block">$gray-700</strong>
<small>#495057</small>
</div>
-
+
<div class="p-3 text-monospace swatch-800">
<strong class="d-block">$gray-800</strong>
<small>#343a40</small>
</div>
-
+
<div class="p-3 text-monospace swatch-900">
<strong class="d-block">$gray-900</strong>
<small>#212529</small>
</div>
-
+
</div>
</div>
<p>Within <code>scss/_variables.scss</code>, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the <code>$colors</code> Sass map:</p>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
</ul>
</nav>
</nav>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</div>
-
+
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.</p>
<h2 id="logo">Logo</h2>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2 id="it-requires-you-to">It requires you to:</h2>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="team">Team</h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
<img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>GeoSot</strong> @geosot
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
<img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Rohit Sharma</strong> @rohit2sharma95
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
<img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>alpadev</strong> @alpadev
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Gaël Poupard</strong> @ffoodd
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The accordion uses <a href="/docs/5.0/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Here’s what you need to know before getting started with the navbar:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="base-nav">Base nav</h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the popover plugin:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Scrollspy has a few requirements to function properly:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
<h2 id="overview">Overview</h2>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the tooltip plugin:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="responsive-images">Responsive images</h2>
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent element.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="approach">Approach</h2>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
<td>Cell</td>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="global-settings">Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.0/utilities/text/">textual utility classes</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
-
+
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
-
+
<div class="p-3 bd-blue-100">$blue-100</div>
-
+
<div class="p-3 bd-blue-200">$blue-200</div>
-
+
<div class="p-3 bd-blue-300">$blue-300</div>
-
+
<div class="p-3 bd-blue-400">$blue-400</div>
-
+
<div class="p-3 bd-blue-500">$blue-500</div>
-
+
<div class="p-3 bd-blue-600">$blue-600</div>
-
+
<div class="p-3 bd-blue-700">$blue-700</div>
-
+
<div class="p-3 bd-blue-800">$blue-800</div>
-
+
<div class="p-3 bd-blue-900">$blue-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
-
+
<div class="p-3 bd-indigo-100">$indigo-100</div>
-
+
<div class="p-3 bd-indigo-200">$indigo-200</div>
-
+
<div class="p-3 bd-indigo-300">$indigo-300</div>
-
+
<div class="p-3 bd-indigo-400">$indigo-400</div>
-
+
<div class="p-3 bd-indigo-500">$indigo-500</div>
-
+
<div class="p-3 bd-indigo-600">$indigo-600</div>
-
+
<div class="p-3 bd-indigo-700">$indigo-700</div>
-
+
<div class="p-3 bd-indigo-800">$indigo-800</div>
-
+
<div class="p-3 bd-indigo-900">$indigo-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
-
+
<div class="p-3 bd-purple-100">$purple-100</div>
-
+
<div class="p-3 bd-purple-200">$purple-200</div>
-
+
<div class="p-3 bd-purple-300">$purple-300</div>
-
+
<div class="p-3 bd-purple-400">$purple-400</div>
-
+
<div class="p-3 bd-purple-500">$purple-500</div>
-
+
<div class="p-3 bd-purple-600">$purple-600</div>
-
+
<div class="p-3 bd-purple-700">$purple-700</div>
-
+
<div class="p-3 bd-purple-800">$purple-800</div>
-
+
<div class="p-3 bd-purple-900">$purple-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
-
+
<div class="p-3 bd-pink-100">$pink-100</div>
-
+
<div class="p-3 bd-pink-200">$pink-200</div>
-
+
<div class="p-3 bd-pink-300">$pink-300</div>
-
+
<div class="p-3 bd-pink-400">$pink-400</div>
-
+
<div class="p-3 bd-pink-500">$pink-500</div>
-
+
<div class="p-3 bd-pink-600">$pink-600</div>
-
+
<div class="p-3 bd-pink-700">$pink-700</div>
-
+
<div class="p-3 bd-pink-800">$pink-800</div>
-
+
<div class="p-3 bd-pink-900">$pink-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
-
+
<div class="p-3 bd-red-100">$red-100</div>
-
+
<div class="p-3 bd-red-200">$red-200</div>
-
+
<div class="p-3 bd-red-300">$red-300</div>
-
+
<div class="p-3 bd-red-400">$red-400</div>
-
+
<div class="p-3 bd-red-500">$red-500</div>
-
+
<div class="p-3 bd-red-600">$red-600</div>
-
+
<div class="p-3 bd-red-700">$red-700</div>
-
+
<div class="p-3 bd-red-800">$red-800</div>
-
+
<div class="p-3 bd-red-900">$red-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
-
+
<div class="p-3 bd-orange-100">$orange-100</div>
-
+
<div class="p-3 bd-orange-200">$orange-200</div>
-
+
<div class="p-3 bd-orange-300">$orange-300</div>
-
+
<div class="p-3 bd-orange-400">$orange-400</div>
-
+
<div class="p-3 bd-orange-500">$orange-500</div>
-
+
<div class="p-3 bd-orange-600">$orange-600</div>
-
+
<div class="p-3 bd-orange-700">$orange-700</div>
-
+
<div class="p-3 bd-orange-800">$orange-800</div>
-
+
<div class="p-3 bd-orange-900">$orange-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
-
+
<div class="p-3 bd-yellow-100">$yellow-100</div>
-
+
<div class="p-3 bd-yellow-200">$yellow-200</div>
-
+
<div class="p-3 bd-yellow-300">$yellow-300</div>
-
+
<div class="p-3 bd-yellow-400">$yellow-400</div>
-
+
<div class="p-3 bd-yellow-500">$yellow-500</div>
-
+
<div class="p-3 bd-yellow-600">$yellow-600</div>
-
+
<div class="p-3 bd-yellow-700">$yellow-700</div>
-
+
<div class="p-3 bd-yellow-800">$yellow-800</div>
-
+
<div class="p-3 bd-yellow-900">$yellow-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
-
+
<div class="p-3 bd-green-100">$green-100</div>
-
+
<div class="p-3 bd-green-200">$green-200</div>
-
+
<div class="p-3 bd-green-300">$green-300</div>
-
+
<div class="p-3 bd-green-400">$green-400</div>
-
+
<div class="p-3 bd-green-500">$green-500</div>
-
+
<div class="p-3 bd-green-600">$green-600</div>
-
+
<div class="p-3 bd-green-700">$green-700</div>
-
+
<div class="p-3 bd-green-800">$green-800</div>
-
+
<div class="p-3 bd-green-900">$green-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
-
+
<div class="p-3 bd-teal-100">$teal-100</div>
-
+
<div class="p-3 bd-teal-200">$teal-200</div>
-
+
<div class="p-3 bd-teal-300">$teal-300</div>
-
+
<div class="p-3 bd-teal-400">$teal-400</div>
-
+
<div class="p-3 bd-teal-500">$teal-500</div>
-
+
<div class="p-3 bd-teal-600">$teal-600</div>
-
+
<div class="p-3 bd-teal-700">$teal-700</div>
-
+
<div class="p-3 bd-teal-800">$teal-800</div>
-
+
<div class="p-3 bd-teal-900">$teal-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
-
+
<div class="p-3 bd-cyan-100">$cyan-100</div>
-
+
<div class="p-3 bd-cyan-200">$cyan-200</div>
-
+
<div class="p-3 bd-cyan-300">$cyan-300</div>
-
+
<div class="p-3 bd-cyan-400">$cyan-400</div>
-
+
<div class="p-3 bd-cyan-500">$cyan-500</div>
-
+
<div class="p-3 bd-cyan-600">$cyan-600</div>
-
+
<div class="p-3 bd-cyan-700">$cyan-700</div>
-
+
<div class="p-3 bd-cyan-800">$cyan-800</div>
-
+
<div class="p-3 bd-cyan-900">$cyan-900</div>
-
+
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
-
+
<div class="p-3 bd-gray-200">$gray-200</div>
-
+
<div class="p-3 bd-gray-300">$gray-300</div>
-
+
<div class="p-3 bd-gray-400">$gray-400</div>
-
+
<div class="p-3 bd-gray-500">$gray-500</div>
-
+
<div class="p-3 bd-gray-600">$gray-600</div>
-
+
<div class="p-3 bd-gray-700">$gray-700</div>
-
+
<div class="p-3 bd-gray-800">$gray-800</div>
-
+
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap's CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
-
+
</div>
-
+
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
-
+
</div>
</div>
</header>
-
+
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
-
+
<div class="d-flex flex-column flex-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.0.2/bootstrap-5.0.2-examples.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.0.2.zip" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
-
+
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<main class="bd-content order-1 py-5" id="content">
<div class="container">
-
+
<h2 id="snippets">Snippets</h2>
<p>Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.</p>
<div class="row">
</a>
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/heroes.png,
</a>
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/features.png,
</a>
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sidebars.png,
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer-navbar.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/jumbotron.png,
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet.png,
</a>
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet-rtl.png,
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-bottom.png,
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/offcanvas-navbar.png,
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout-rtl.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel-rtl.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog-rtl.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard-rtl.png,
<p class="text-muted">Combine the powers of the Bootstrap grid and the Masonry layout.</p>
</div>
</div>
-
-
+
+
<hr class="my-5">
<div class="container">
<div class="text-center">
src="/docs/5.0/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
-
+
</div>
</main>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on <em>why</em> we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.</p>
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>—we’d love to discuss it with you.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.</p>
<p>While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<div class="bd-example">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code><label></code>s outside the input group.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code><form></code> element. Bootstrap provides no default styling for the <code><form></code> element, but there are some powerful browser features that are provided by default.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../form-control/">
<strong class="d-block h5 mb-0">Form control</strong>
<span class="text-secondary">Style textual inputs and textareas with support for multiple states.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../select/">
<strong class="d-block h5 mb-0">Select</strong>
<span class="text-secondary">Improve browser default select elements with a custom initial appearance.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../checks-radios/">
<strong class="d-block h5 mb-0">Checks & radios</strong>
<span class="text-secondary">Use our custom radio buttons and checkboxes in forms for selecting input options.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../range/">
<strong class="d-block h5 mb-0">Range</strong>
<span class="text-secondary">Replace browser default range inputs with our custom version.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../input-group/">
<strong class="d-block h5 mb-0">Input group</strong>
<span class="text-secondary">Attach labels and buttons to your inputs for increased semantic value.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../floating-labels/">
<strong class="d-block h5 mb-0">Floating labels</strong>
<span class="text-secondary">Create beautifully simple form labels that float over your input fields.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../layout/">
<strong class="d-block h5 mb-0">Layout</strong>
<span class="text-secondary">Create inline, horizontal, or complex grid-based layouts with your forms.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../validation/">
<strong class="d-block h5 mb-0">Validation</strong>
<span class="text-secondary">Validate your forms with custom or native validation behaviors and styles.</span>
</a>
</div>
-
+
</div>
-
+
<h2 id="overview">Overview</h2>
<p>Bootstrap’s form controls expand on <a href="/docs/5.0/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Create custom <code><input type="range"></code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="default">Default</h2>
<p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
+
<script async src="/docs/5.0/assets/js/validate-forms.js"></script>
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>
<h2 id="overview-and-limitations">Overview and limitations</h2>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>
<div class="bd-callout bd-callout-info">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="supported-browsers">Supported browsers</h2>
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="tooling-setup">Tooling setup</h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v5.0.2/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.0.2</strong> to easily drop into your project, which includes:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="quick-start">Quick start</h2>
<p>Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? <a href="/docs/5.0/getting-started/download/">Head to the downloads page</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="individual-or-compiled">Individual or compiled</h2>
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="install-parcel">Install Parcel</h2>
<p>Install <a href="https://en.parceljs.org/getting_started.html">Parcel Bundler</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="what-is-rfs">What is RFS?</h2>
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.3">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="get-familiar">Get familiar</h2>
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.0/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
<p><a href="/docs/5.0/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.0/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="fixed-top">Fixed top</h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code><iframe></code>s, <code><embed></code>s, <code><video></code>s, and <code><object></code>s. These helpers also can be used on any standard HTML child element (e.g., a <code><div></code> or <code><img></code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="core-concepts">Core concepts</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> Be sure to <a href="/docs/5.0/layout/grid/">read the Grid page</a> first before diving into how to modify and customize your grid columns.
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-they-work">How they work</h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-they-work">How they work</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="changing-display">Changing <code>display</code></h2>
<p>Use our <a href="/docs/5.0/utilities/display/">display utilities</a> for responsively toggling common values of the <code>display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code>100</code>+ or <code>500</code>+.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="dependencies">Dependencies</h2>
<ul>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="background-color">Background color</h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.0/utilities/colors/">color utilities</a>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="border">Border</h2>
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="colors">Colors</h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.0/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="text-selection">Text selection</h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="position-values">Position values</h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="relative-to-the-parent">Relative to the parent</h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="text-alignment">Text alignment</h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
<script src="/docs/5.0/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.</p>
<h2 id="logo">Logo</h2>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2 id="it-requires-you-to">It requires you to:</h2>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="team">Team</h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<strong>Mark Otto</strong> @mdo
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Jacob Thornton</strong> @fat
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>XhmikosR</strong> @xhmikosr
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
<img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>GeoSot</strong> @geosot
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
<img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Rohit Sharma</strong> @rohit2sharma95
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
<img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>alpadev</strong> @alpadev
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Gaël Poupard</strong> @ffoodd
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Patrick H. Lauke</strong> @patrickhlauke
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Martijn Cuppens</strong> @martijncuppens
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<strong>Johann-S</strong> @johann-s
</span>
</a>
-
+
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
<span>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The accordion uses <a href="/docs/5.1/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Here’s what you need to know before getting started with the navbar:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="base-nav">Base nav</h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the popover plugin:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Scrollspy has a few requirements to function properly:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
<h2 id="overview">Overview</h2>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Things to know when using the tooltip plugin:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="responsive-images">Responsive images</h2>
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent width.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="approach">Approach</h2>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
<td>Cell</td>
<td>Cell</td>
</tr>
-
+
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="global-settings">Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.1/utilities/text/">textual utility classes</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<div class="row">
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
-
+
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
-
+
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
-
+
<div class="p-3 bd-blue-100">$blue-100</div>
-
+
<div class="p-3 bd-blue-200">$blue-200</div>
-
+
<div class="p-3 bd-blue-300">$blue-300</div>
-
+
<div class="p-3 bd-blue-400">$blue-400</div>
-
+
<div class="p-3 bd-blue-500">$blue-500</div>
-
+
<div class="p-3 bd-blue-600">$blue-600</div>
-
+
<div class="p-3 bd-blue-700">$blue-700</div>
-
+
<div class="p-3 bd-blue-800">$blue-800</div>
-
+
<div class="p-3 bd-blue-900">$blue-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
-
+
<div class="p-3 bd-indigo-100">$indigo-100</div>
-
+
<div class="p-3 bd-indigo-200">$indigo-200</div>
-
+
<div class="p-3 bd-indigo-300">$indigo-300</div>
-
+
<div class="p-3 bd-indigo-400">$indigo-400</div>
-
+
<div class="p-3 bd-indigo-500">$indigo-500</div>
-
+
<div class="p-3 bd-indigo-600">$indigo-600</div>
-
+
<div class="p-3 bd-indigo-700">$indigo-700</div>
-
+
<div class="p-3 bd-indigo-800">$indigo-800</div>
-
+
<div class="p-3 bd-indigo-900">$indigo-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
-
+
<div class="p-3 bd-purple-100">$purple-100</div>
-
+
<div class="p-3 bd-purple-200">$purple-200</div>
-
+
<div class="p-3 bd-purple-300">$purple-300</div>
-
+
<div class="p-3 bd-purple-400">$purple-400</div>
-
+
<div class="p-3 bd-purple-500">$purple-500</div>
-
+
<div class="p-3 bd-purple-600">$purple-600</div>
-
+
<div class="p-3 bd-purple-700">$purple-700</div>
-
+
<div class="p-3 bd-purple-800">$purple-800</div>
-
+
<div class="p-3 bd-purple-900">$purple-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
-
+
<div class="p-3 bd-pink-100">$pink-100</div>
-
+
<div class="p-3 bd-pink-200">$pink-200</div>
-
+
<div class="p-3 bd-pink-300">$pink-300</div>
-
+
<div class="p-3 bd-pink-400">$pink-400</div>
-
+
<div class="p-3 bd-pink-500">$pink-500</div>
-
+
<div class="p-3 bd-pink-600">$pink-600</div>
-
+
<div class="p-3 bd-pink-700">$pink-700</div>
-
+
<div class="p-3 bd-pink-800">$pink-800</div>
-
+
<div class="p-3 bd-pink-900">$pink-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
-
+
<div class="p-3 bd-red-100">$red-100</div>
-
+
<div class="p-3 bd-red-200">$red-200</div>
-
+
<div class="p-3 bd-red-300">$red-300</div>
-
+
<div class="p-3 bd-red-400">$red-400</div>
-
+
<div class="p-3 bd-red-500">$red-500</div>
-
+
<div class="p-3 bd-red-600">$red-600</div>
-
+
<div class="p-3 bd-red-700">$red-700</div>
-
+
<div class="p-3 bd-red-800">$red-800</div>
-
+
<div class="p-3 bd-red-900">$red-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
-
+
<div class="p-3 bd-orange-100">$orange-100</div>
-
+
<div class="p-3 bd-orange-200">$orange-200</div>
-
+
<div class="p-3 bd-orange-300">$orange-300</div>
-
+
<div class="p-3 bd-orange-400">$orange-400</div>
-
+
<div class="p-3 bd-orange-500">$orange-500</div>
-
+
<div class="p-3 bd-orange-600">$orange-600</div>
-
+
<div class="p-3 bd-orange-700">$orange-700</div>
-
+
<div class="p-3 bd-orange-800">$orange-800</div>
-
+
<div class="p-3 bd-orange-900">$orange-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
-
+
<div class="p-3 bd-yellow-100">$yellow-100</div>
-
+
<div class="p-3 bd-yellow-200">$yellow-200</div>
-
+
<div class="p-3 bd-yellow-300">$yellow-300</div>
-
+
<div class="p-3 bd-yellow-400">$yellow-400</div>
-
+
<div class="p-3 bd-yellow-500">$yellow-500</div>
-
+
<div class="p-3 bd-yellow-600">$yellow-600</div>
-
+
<div class="p-3 bd-yellow-700">$yellow-700</div>
-
+
<div class="p-3 bd-yellow-800">$yellow-800</div>
-
+
<div class="p-3 bd-yellow-900">$yellow-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
-
+
<div class="p-3 bd-green-100">$green-100</div>
-
+
<div class="p-3 bd-green-200">$green-200</div>
-
+
<div class="p-3 bd-green-300">$green-300</div>
-
+
<div class="p-3 bd-green-400">$green-400</div>
-
+
<div class="p-3 bd-green-500">$green-500</div>
-
+
<div class="p-3 bd-green-600">$green-600</div>
-
+
<div class="p-3 bd-green-700">$green-700</div>
-
+
<div class="p-3 bd-green-800">$green-800</div>
-
+
<div class="p-3 bd-green-900">$green-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
-
+
<div class="p-3 bd-teal-100">$teal-100</div>
-
+
<div class="p-3 bd-teal-200">$teal-200</div>
-
+
<div class="p-3 bd-teal-300">$teal-300</div>
-
+
<div class="p-3 bd-teal-400">$teal-400</div>
-
+
<div class="p-3 bd-teal-500">$teal-500</div>
-
+
<div class="p-3 bd-teal-600">$teal-600</div>
-
+
<div class="p-3 bd-teal-700">$teal-700</div>
-
+
<div class="p-3 bd-teal-800">$teal-800</div>
-
+
<div class="p-3 bd-teal-900">$teal-900</div>
-
+
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
-
+
<div class="p-3 bd-cyan-100">$cyan-100</div>
-
+
<div class="p-3 bd-cyan-200">$cyan-200</div>
-
+
<div class="p-3 bd-cyan-300">$cyan-300</div>
-
+
<div class="p-3 bd-cyan-400">$cyan-400</div>
-
+
<div class="p-3 bd-cyan-500">$cyan-500</div>
-
+
<div class="p-3 bd-cyan-600">$cyan-600</div>
-
+
<div class="p-3 bd-cyan-700">$cyan-700</div>
-
+
<div class="p-3 bd-cyan-800">$cyan-800</div>
-
+
<div class="p-3 bd-cyan-900">$cyan-900</div>
-
+
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
-
+
<div class="p-3 bd-gray-200">$gray-200</div>
-
+
<div class="p-3 bd-gray-300">$gray-300</div>
-
+
<div class="p-3 bd-gray-400">$gray-400</div>
-
+
<div class="p-3 bd-gray-500">$gray-500</div>
-
+
<div class="p-3 bd-gray-600">$gray-600</div>
-
+
<div class="p-3 bd-gray-700">$gray-700</div>
-
+
<div class="p-3 bd-gray-800">$gray-800</div>
-
+
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
-
+
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap includes many <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap's CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
-
+
</div>
-
+
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
-
+
</div>
</div>
</header>
-
+
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
-
+
<div class="d-flex flex-column flex-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.1.3/bootstrap-5.1.3-examples.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.1.3.zip" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
-
+
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<main class="bd-content order-1 py-5" id="content">
<div class="container">
-
+
<h2 id="snippets">Snippets</h2>
<p>Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.</p>
<div class="row">
</a>
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/heroes.png,
</a>
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/features.png,
</a>
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sidebars.png,
</a>
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/footers.png,
</a>
<p class="text-muted">Finish every page strong with an awesome footer, big or small.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dropdowns.png,
</a>
<p class="text-muted">Enhance your dropdowns with filters, icons, custom styles, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/list-groups.png,
</a>
<p class="text-muted">Extend list groups with utilities and custom styles for any content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/modals.png,
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/pricing.png,
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/product.png,
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cover.png,
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard.png,
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sign-in.png,
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer-navbar.png,
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/jumbotron.png,
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/grid.png,
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet.png,
</a>
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet-rtl.png,
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-static.png,
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-fixed.png,
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-bottom.png,
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/offcanvas-navbar.png,
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout-rtl.png,
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel-rtl.png,
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog-rtl.png,
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
-
-
+
+
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard-rtl.png,
<p class="text-muted">Combine the powers of the Bootstrap grid and the Masonry layout.</p>
</div>
</div>
-
-
+
+
<hr class="my-5">
<div class="container">
<div class="text-center">
src="/docs/5.1/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
-
+
</div>
</main>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on <em>why</em> we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.</p>
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>—we’d love to discuss it with you.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.</p>
<p>While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<div class="bd-example">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code><label></code>s outside the input group.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code><form></code> element. Bootstrap provides no default styling for the <code><form></code> element, but there are some powerful browser features that are provided by default.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="row g-3">
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../form-control/">
<strong class="d-block h5 mb-0">Form control</strong>
<span class="text-secondary">Style textual inputs and textareas with support for multiple states.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../select/">
<strong class="d-block h5 mb-0">Select</strong>
<span class="text-secondary">Improve browser default select elements with a custom initial appearance.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../checks-radios/">
<strong class="d-block h5 mb-0">Checks & radios</strong>
<span class="text-secondary">Use our custom radio buttons and checkboxes in forms for selecting input options.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../range/">
<strong class="d-block h5 mb-0">Range</strong>
<span class="text-secondary">Replace browser default range inputs with our custom version.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../input-group/">
<strong class="d-block h5 mb-0">Input group</strong>
<span class="text-secondary">Attach labels and buttons to your inputs for increased semantic value.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../floating-labels/">
<strong class="d-block h5 mb-0">Floating labels</strong>
<span class="text-secondary">Create beautifully simple form labels that float over your input fields.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../layout/">
<strong class="d-block h5 mb-0">Layout</strong>
<span class="text-secondary">Create inline, horizontal, or complex grid-based layouts with your forms.</span>
</a>
</div>
-
+
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../validation/">
<strong class="d-block h5 mb-0">Validation</strong>
<span class="text-secondary">Validate your forms with custom or native validation behaviors and styles.</span>
</a>
</div>
-
+
</div>
-
+
<h2 id="overview">Overview</h2>
<p>Bootstrap’s form controls expand on <a href="/docs/5.1/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>Create custom <code><input type="range"></code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="default">Default</h2>
<p>Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code><select></code>’s initial appearance and cannot modify the <code><option></code>s due to browser limitations.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
+
<script async src="/docs/5.1/assets/js/validate-forms.js"></script>
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>
<h2 id="overview-and-limitations">Overview and limitations</h2>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>
<div class="bd-callout bd-callout-info">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="supported-browsers">Supported browsers</h2>
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="tooling-setup">Tooling setup</h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> to build the documentation and compile source files. Our <a href="https://github.com/twbs/bootstrap/blob/v5.1.3/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.1.3</strong> to easily drop into your project, which includes:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="quick-start">Quick start</h2>
<p>Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? <a href="/docs/5.1/getting-started/download/">Head to the downloads page</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="individual-or-compiled">Individual or compiled</h2>
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="install-parcel">Install Parcel</h2>
<p>Install <a href="https://en.parceljs.org/getting_started.html">Parcel Bundler</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="what-is-rfs">What is RFS?</h2>
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.6">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="get-familiar">Get familiar</h2>
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.1/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
<p><a href="/docs/5.1/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.1/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="fixed-top">Fixed top</h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="about">About</h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code><iframe></code>s, <code><embed></code>s, <code><video></code>s, and <code><object></code>s. These helpers also can be used on any standard HTML child element (e.g., a <code><div></code> or <code><img></code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source <a href="https://almonk.github.io/pylon/">Pylon project</a>.</p>
<div class="bd-callout bd-callout-warning">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Vertical rules are inspired by the <code><hr></code> element, allowing you to create vertical dividers in common layouts. They’re styled just like <code><hr></code> elements:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="core-concepts">Core concepts</h2>
<ul>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<div class="bd-callout bd-callout-info">
<strong>Heads up!</strong> Be sure to <a href="/docs/5.1/layout/grid/">read the Grid page</a> first before diving into how to modify and customize your grid columns.
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-they-work">How they work</h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.</p>
<div class="bd-callout bd-callout-warning">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="example">Example</h2>
<p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-they-work">How they work</h2>
<ul>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="changing-display">Changing <code>display</code></h2>
<p>Use our <a href="/docs/5.1/utilities/display/">display utilities</a> for responsively toggling common values of the <code>display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code>100</code>+ or <code>500</code>+.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="dependencies">Dependencies</h2>
<ul>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="background-color">Background color</h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.1/utilities/colors/">color utilities</a>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="border">Border</h2>
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="colors">Colors</h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.1/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="how-it-works">How it works</h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="overview">Overview</h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="text-selection">Text selection</h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>The <code>opacity</code> property sets the opacity level for an element. The opacity level describes the transparency level, where <code>1</code> is not transparent at all, <code>.5</code> is 50% visible, and <code>0</code> is completely transparent.</p>
<p>Set the <code>opacity</code> of an element using <code>.opacity-{value}</code> utilities.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="position-values">Position values</h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="examples">Examples</h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="relative-to-the-parent">Relative to the parent</h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
</ul>
</nav>
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<h2 id="text-alignment">Text alignment</h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
</header>
-
+
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
</div>
-
+
<div class="bd-content ps-lg-4">
-
+
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
+<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
-
+
</div>
</div>
</header>
-
+
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Versions</h1>
<p class="bd-lead">An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v5.</p>
-
+
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<main class="bd-content order-1 py-5" id="content">
<div class="container">
-
+
<div class="row">
<div class="col-md-6 col-lg-4 col-xl mb-4">
<h2>v5.x</h2>
5.1
<span class="badge bg-primary">Latest</span>
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/5.0/">
5.0
-
+
</a>
</div>
</div>
-
+
<div class="col-md-6 col-lg-4 col-xl mb-4">
<h2>v4.x</h2>
<p>Our previous major release with its minor releases. Last update was v4.6.0.</p><div class="list-group">
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.6/">
4.6
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.5/">
4.5
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.4/">
4.4
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.3/">
4.3
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.2/">
4.2
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.1/">
4.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/4.0/">
4.0
-
+
</a>
</div>
</div>
-
+
<div class="col-md-6 col-lg-4 col-xl mb-4">
<h2>v3.x</h2>
<p>Every minor and patch release from v3 is listed below. Last update was v3.4.1.</p><div class="list-group">
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/3.4/">
3.4
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/docs/3.3/">
3.3
-
+
</a>
</div>
</div>
-
+
<div class="col-md-6 col-lg-4 col-xl mb-4">
<h2>v2.x</h2>
<p>Every minor and patch release from v2 is listed below.</p><div class="list-group">
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.3.2/">
2.3.2
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.3.1/">
2.3.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.3.0/">
2.3.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.2.2/">
2.2.2
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.2.1/">
2.2.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.2.0/">
2.2.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.1.1/">
2.1.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.1.0/">
2.1.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.0.4/">
2.0.4
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.0.3/">
2.0.3
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.0.2/">
2.0.2
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.0.1/">
2.0.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/2.0.0/">
2.0.0
-
+
</a>
</div>
</div>
-
+
<div class="col-md-6 col-lg-4 col-xl mb-4">
<h2>v1.x</h2>
<p>Every minor and patch release from v1 is listed below.</p><div class="list-group">
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.4.0/">
1.4.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.3.0/">
1.3.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.2.0/">
1.2.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.1.1/">
1.1.1
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.1.0/">
1.1.0
-
+
</a>
-
-
+
+
<a class="list-group-item list-group-item-action py-2 text-primary" href="https://getbootstrap.com/1.0.0/">
1.0.0
-
+
</a>
</div>
</div>
-
+
</div>
</main>
<script src="/docs/5.1/assets/js/docs.min.js"></script>
-
-
+
+
</body>
</html>