-
-
-
-
-
-
-
- Album example for Bootstrap
-
-
-
-
-
-
-
-
-
-
-
-
-
-
About
-
Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.
-
-
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
-
-
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
-
Heading
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-
Sub-heading
-
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
Example code block
-
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
-
Sub-heading
-
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-
-
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-
Donec id elit non mi porta gravida at eget metus.
-
Nulla vitae elit libero, a pharetra augue.
-
-
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
-
-
Vestibulum id ligula porta felis euismod semper.
-
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
-
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
-
-
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-
-
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-
Donec id elit non mi porta gravida at eget metus.
-
Nulla vitae elit libero, a pharetra augue.
-
-
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
-
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
-
-
-
-
-
-
-
-
-
About
-
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css
deleted file mode 100644
index 4bf83737..00000000
--- a/docs/examples/carousel/carousel.css
+++ /dev/null
@@ -1,113 +0,0 @@
-/* GLOBAL STYLES
--------
-
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation**
-This is a part of the reference documentation from Bootstrap.
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
-See the Material Design section for more elements and customization options.
-{% endcallout %}
-
-------------------------------------------- */
-/* Padding below the footer and lighter body text */
-
-body {
- padding-bottom: 3rem;
- color: #5a5a5a;
-}
-
-
-/* CUSTOMIZE THE CAROUSEL
--------------------------------------------------- */
-
-/* Carousel base class */
-.carousel {
- margin-bottom: 4rem;
-}
-/* Since positioning the image, we need to help out the caption */
-.carousel-caption {
- z-index: 10;
-}
-
-/* Declare heights because of positioning of img element */
-.carousel-item {
- height: 32rem;
- background-color: #777;
-}
-.carousel-item > img {
- position: absolute;
- top: 0;
- left: 0;
- min-width: 100%;
- height: 32rem;
-}
-
-.carousel-indicators {
- top: 1.5rem;
- right: 1.5rem;
- bottom: auto;
- left: auto;
- width: 1rem;
- margin-left: 0;
-}
-
-.carousel-indicators > li {
- margin-bottom: .25rem;
-}
-
-
-/* MARKETING CONTENT
--------------------------------------------------- */
-
-/* Center align the text within the three columns below the carousel */
-.marketing .col-lg-4 {
- margin-bottom: 1.5rem;
- text-align: center;
-}
-.marketing h2 {
- font-weight: normal;
-}
-.marketing .col-lg-4 p {
- margin-right: .75rem;
- margin-left: .75rem;
-}
-
-
-/* Featurettes
-------------------------- */
-
-.featurette-divider {
- margin: 5rem 0; /* Space out the Bootstrap more */
-}
-
-/* Thin out the marketing headings */
-.featurette-heading {
- font-weight: 300;
- line-height: 1;
- letter-spacing: -.05rem;
-}
-
-
-/* RESPONSIVE CSS
--------------------------------------------------- */
-
-@media (min-width: 40em) {
- /* Bump up size of carousel content */
- .carousel-caption p {
- margin-bottom: 1.25rem;
- font-size: 1.25rem;
- line-height: 1.4;
- }
-
- .featurette-heading {
- font-size: 50px;
- }
-}
-
-@media (min-width: 62em) {
- .featurette-heading {
- margin-top: 7rem;
- }
-}
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
deleted file mode 100644
index b2faa546..00000000
--- a/docs/examples/carousel/index.html
+++ /dev/null
@@ -1,186 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- Carousel Template for Bootstrap
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Example headline.
-
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
-
-
-
-
-
-
-
-
-
-
-
Oh yeah, it's that good. See for yourself.
-
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
-
-
-
-
-
-
-
-
-
-
-
And lastly, this one. Checkmate.
-
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
-
-
-
Five grid tiers
-
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
-
-
-
.col-xs-4
-
.col-xs-4
-
.col-xs-4
-
-
-
-
.col-sm-4
-
.col-sm-4
-
.col-sm-4
-
-
-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
-
-
-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
-
-
-
-
.col-xl-4
-
.col-xl-4
-
.col-xl-4
-
-
-
Three equal columns
-
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
-
-
Three unequal columns
-
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
-
-
.col-md-3
-
.col-md-6
-
.col-md-3
-
-
-
Two columns
-
Get two columns starting at desktops and scaling to large desktops.
-
-
.col-md-8
-
.col-md-4
-
-
-
Full width, single column
-
No grid classes are necessary for full-width elements.
-
-
-
-
Two columns with two nested columns
-
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
-
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
-
-
- .col-md-8
-
-
.col-md-6
-
.col-md-6
-
-
-
.col-md-4
-
-
-
-
-
Mixed: mobile and desktop
-
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
-
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
-
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
-
-
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
-
-
.col-xs-6
-
.col-xs-6
-
-
-
-
-
Mixed: mobile, tablet, and desktop
-
-
-
.col-xs-12 .col-sm-6 .col-lg-8
-
.col-xs-6 .col-lg-4
-
-
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
-
-
-
-
Column clearing
-
Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.
-
-
- .col-xs-6 .col-sm-3
-
- Resize your viewport or check it out on your phone for an example.
-
-
.col-xs-6 .col-sm-3
-
-
-
-
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
-
-
-
-
Offset, push, and pull resets
-
Reset offsets, pushes, and pulls at specific breakpoints.
Super basic template with a fixed top 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.
+Brand new components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework.
Attach a footer to the bottom of the viewport with a fixed top navbar.
-
## Experiments
@@ -164,11 +45,9 @@ Brand new components and templates to help folks quickly get started with Bootst
Examples that focus on future-friendly features or techniques.
This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.
As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.
-
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-
-
Subheading
-
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-
-
Subheading
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
-
-
-
Subheading
-
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-
-
Subheading
-
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-
-
Subheading
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/examples/narrow-jumbotron/narrow-jumbotron.css
deleted file mode 100644
index 28cf7738..00000000
--- a/docs/examples/narrow-jumbotron/narrow-jumbotron.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/* Space out content a bit */
-body {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
-}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.marketing,
-.footer {
- padding-right: 1rem;
- padding-left: 1rem;
-}
-
-/* Custom page header */
-.header {
- padding-bottom: 1rem;
- border-bottom: .05rem solid #e5e5e5;
-}
-/* Make the masthead heading the same height as the navigation */
-.header h3 {
- margin-top: 0;
- margin-bottom: 0;
- line-height: 3rem;
-}
-
-/* Custom page footer */
-.footer {
- padding-top: 1.5rem;
- color: #777;
- border-top: .05rem solid #e5e5e5;
-}
-
-/* Customize container */
-@media (min-width: 48em) {
- .container {
- max-width: 46rem;
- }
-}
-.container-narrow > hr {
- margin: 2rem 0;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
- text-align: center;
- border-bottom: .05rem solid #e5e5e5;
-}
-.jumbotron .btn {
- padding: .75rem 1.5rem;
- font-size: 1.5rem;
-}
-
-/* Supporting marketing content */
-.marketing {
- margin: 3rem 0;
-}
-.marketing p + h4 {
- margin-top: 1.5rem;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 48em) {
- /* Remove the padding we set earlier */
- .header,
- .marketing,
- .footer {
- padding-right: 0;
- padding-left: 0;
- }
- /* Space out the masthead */
- .header {
- margin-bottom: 2rem;
- }
- /* Remove the bottom border on the jumbotron for visual effect */
- .jumbotron {
- border-bottom: 0;
- }
-}
diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html
deleted file mode 100644
index 24c706a3..00000000
--- a/docs/examples/navbar-top-fixed/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- Fixed top navbar example for Bootstrap
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Collapsed content
-
Toggleable via the navbar brand.
-
-
-
-
-
-
-
-
-
-
Navbar example
-
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/examples/navbar-top-fixed/navbar-top-fixed.css b/docs/examples/navbar-top-fixed/navbar-top-fixed.css
deleted file mode 100644
index 3e4f59f4..00000000
--- a/docs/examples/navbar-top-fixed/navbar-top-fixed.css
+++ /dev/null
@@ -1,5 +0,0 @@
-body {
- /* Show it's not fixed to the top */
- min-height: 75rem;
- padding-top: 6rem;
-}
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
deleted file mode 100644
index ea2c409d..00000000
--- a/docs/examples/navbar-top/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- Top navbar example for Bootstrap
-
-
-
-
-
-
-
-
-
-
-
-
-
Collapsed content
-
Toggleable via the navbar brand.
-
-
-
-
-
-
-
-
-
Navbar example
-
This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a .container to limit its width and will scroll with the rest of the page's content.
-
At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.
-
-
-
-
Heading
-
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.
+
+
+
+
Heading
+
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the body > .container.