8.1 KiB
layout | title | description | redirect_from |
---|---|---|---|
simple | Examples | Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. | /examples/ |
[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
Framework
Examples that focus on implementing uses of built-in components provided by Bootstrap.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/starter-template.jpg)
Starter template
Nothing but the basics: compiled CSS and JavaScript.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/grid.jpg)
Grids
Multiple examples of grid layouts with all four tiers, nesting, and more.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/jumbotron.jpg)
Jumbotron
Build around the jumbotron with a navbar and some basic grid columns.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/jumbotron-narrow.jpg)
Narrow jumbotron
Build a more custom page by narrowing the default container and jumbotron.
Navbars
Taking the default navbar component and showing how it can be moved, placed, and extended.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/navbar.jpg)
Navbar
Super basic template that includes the navbar along with some additional content.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/navbar-static.jpg)
Static top navbar
Super basic template with a static top navbar along with some additional content.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/navbar-fixed.jpg)
Fixed navbar
Super basic template with a fixed top navbar along with some additional content.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/navbar-bottom.jpg)
Bottom navbar
Super basic template with a bottom navbar along with some additional content.
Custom components
Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/album.jpg)
Album
Simple one-page template for photo galleries, portfolios, and more.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/cover.jpg)
Cover
A one-page template for building simple and beautiful home pages.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/carousel.jpg)
Carousel
Customize the navbar and carousel, then add some new components.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/blog.jpg)
Blog
Simple two-column blog layout with custom navigation, header, and type.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/dashboard.jpg)
Dashboard
Basic admin dashboard shell with fixed sidebar and navbar.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/sign-in.jpg)
Sign-in page
Custom form layout and design for a simple sign in form.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/justified-nav.jpg)
Justified nav
Create a custom navbar with justified links. Heads up! Not too Safari friendly.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/sticky-footer.jpg)
Sticky footer
Attach a footer to the bottom of the viewport when the content is shorter than it.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/sticky-footer-navbar.jpg)
Sticky footer w/ navbar
Attach a footer to the bottom of the viewport with a fixed top navbar.
Experiments
Examples that focus on future-friendly features or techniques.
![](/kotovalexarian-likes-github/twbs--bootstrap/media/commit/6824f71795d7cae53ac89da9eb8ebe8548278f83/docs/4.0/examples/%7B%7B%20site.baseurl%20%7D%7D/docs/%7B%7B%20site.docs_version%20%7D%7D/examples/screenshots/offcanvas.jpg)
Offcanvas
Build a toggleable off-canvas navigation menu for use with Bootstrap.