1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!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> Bootstrap · The world's most popular mobile-first and responsive front-end framework. </title>
<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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/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>
<link rel="canonical" href="https://getbootstrap.com/docs/3.3/">
<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 class=bs-docs-home>
<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>
<main class=bs-docs-masthead id=content tabindex=-1>
<div class=container> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
<p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p class=lead> <a href=getting-started/#download class="btn btn-outline-inverse btn-lg" onclick='ga("send","event","Jumbotron actions","Download","Download 3.3.7")'>Download Bootstrap</a> </p>
<p class=version>Currently v3.3.7</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
</div>
</main>
<div class=bs-docs-featurette>
<div class=container>
<h2 class=bs-docs-featurette-title>Designed for everyone, everywhere</h2>
<p class=lead>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
<hr class=half-rule>
<div class=row>
<div class=col-sm-4> <img alt="Sass and Less support" src=assets/img/sass-less.png class=img-responsive>
<h3>Preprocessors</h3>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href=css/#less>Less</a> and <a href=css/#sass>Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class=col-sm-4> <img alt="Responsive across devices" src=assets/img/devices.png class=img-responsive>
<h3>One framework, every device.</h3>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class=col-sm-4> <img alt=Components src=assets/img/components.png class=img-responsive>
<h3>Full of features</h3>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
</div>
<hr class=half-rule>
<p class=lead>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a href=https://github.com/twbs/bootstrap class="btn btn-outline btn-lg">View the GitHub project</a> </div>
</div>
<div class="bs-docs-featurette">
<div class="container">
<h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
<p class="lead">
Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools.
</p>
<p class="lead">
<a href="https://themes.getbootstrap.com/" class="btn btn-outline btn-lg">Browse themes</a>
</p>
<img class="img-responsive" src="assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388" style="margin-left: auto; margin-right: auto;">
</div>
</div>
<div class=bs-docs-featurette>
<div class=container>
<h2 class=bs-docs-featurette-title>Built with Bootstrap</h2>
<p class=lead>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href=../getting-started/#examples>collection of examples</a> or by exploring some of our favorites.</p>
<hr class=half-rule>
<div class="row bs-docs-featured-sites">
<div class="col-xs-6 col-sm-3">
<a href=https://expo.getbootstrap.com/2014/10/29/lyft/ rel=noopener target=_blank title=Lyft> <img alt=Lyft src=assets/img/expo-lyft.jpg class=img-responsive> </a>
</div>
<div class="col-xs-6 col-sm-3">
<a href=https://expo.getbootstrap.com/2014/09/30/vogue/ rel=noopener target=_blank title=Vogue> <img alt=Vogue src=assets/img/expo-vogue.jpg class=img-responsive> </a>
</div>
<div class="col-xs-6 col-sm-3">
<a href=https://expo.getbootstrap.com/2014/03/13/riot-design/ rel=noopener target=_blank title="Riot Design"> <img alt="Riot Design" src=assets/img/expo-riot.jpg class=img-responsive> </a>
</div>
<div class="col-xs-6 col-sm-3">
<a href=https://expo.getbootstrap.com/2014/02/12/newsweek/ rel=noopener target=_blank title=Newsweek> <img alt=Newsweek src=assets/img/expo-newsweek.jpg class=img-responsive> </a>
</div>
</div>
<hr class=half-rule>
<p class=lead>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <a href=https://expo.getbootstrap.com/ class="btn btn-outline btn-lg">Explore the Expo</a> </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>
|
