Album example
+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.
+ +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.
-Contact
- +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Album example
-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.
-- Main call to action - Secondary action -
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Title of a longer featured blog post
-Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.
- -- Featured post -
-This is a wider card with supporting text below as a natural lead-in to additional content.
- Continue reading -- Post title -
-This is a wider card with supporting text below as a natural lead-in to additional content.
- Continue reading -
- From the Firehose
+
+
+
+
+
+
+ Title of a longer featured blog post
+ Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.
+
+
+
+
+
+
+
+
+ World
+
+ Featured post
+ Nov 12
+ This is a wider card with supporting text below as a natural lead-in to additional content.
+ Continue reading
+
+
+
+
+
+
+
+ Design
+
+ Post title
+
+ Nov 11
+ This is a wider card with supporting text below as a natural lead-in to additional content.
+ Continue reading
+
+
+
+
+
+
Title of a longer featured blog post
+Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.
+ ++ Featured post
+This is a wider card with supporting text below as a natural lead-in to additional content.
+ Continue reading ++ Post title +
+This is a wider card with supporting text below as a natural lead-in to additional content.
+ Continue reading +Sample blog post
-January 1, 2014 by Mark
++ From the Firehose +
-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.
-Sample blog post
+January 1, 2014 by Mark
-Another blog post
-December 23, 2013 by Jacob
+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.
-Another blog post
+December 23, 2013 by Jacob
-New feature
-December 14, 2013 by Chris
+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.
-New feature
+December 14, 2013 by Chris
- +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.
+Archives
--
-
- March 2014 -
- February 2014 -
- January 2014 -
- December 2013 -
- November 2013 -
- October 2013 -
- September 2013 -
- August 2013 -
- July 2013 -
- June 2013 -
- May 2013 -
- April 2013 -
Archives
+-
+
- March 2014 +
- February 2014 +
- January 2014 +
- December 2013 +
- November 2013 +
- October 2013 +
- September 2013 +
- August 2013 +
- July 2013 +
- June 2013 +
- May 2013 +
- April 2013 +
-
-
-
-
-
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.
- -Another 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.
- -One more for good measure.
-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.
- --
+
+
+
+
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.
+Heading
-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.
- -Heading
-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.
- -Heading
-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.
- -- -
First featurette heading. It'll blow your mind.
-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.
-Another 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.
+- -
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.
-One more for good measure.
+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.
+- -
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.
-- - - -
Heading
+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.
+ +Heading
+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.
+ +Heading
+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.
+ ++ +
First featurette heading. It'll blow your mind.
+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.
++ + + +
Checkout form
+Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
++ Your cart + 3 +
+-
+
-
+ ++ $12 +
Product name
+ Brief description +
+ -
+ ++ $8 +
Second product
+ Brief description +
+ -
+ ++ $5 +
Third item
+ Brief description +
+ -
+ ++ -$5 +
Promo code
+ EXAMPLECODE +
+ - + Total (USD) + $20 + +
Checkout form
-Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
-- Your cart - 3 -
--
-
-
- -- $12 -
Product name
- Brief description -
- -
- -- $8 -
Second product
- Brief description -
- -
- -- $5 -
Third item
- Brief description -
- -
- -- -$5 -
Promo code
- EXAMPLECODE -
- - - Total (USD) - $20 - -
Billing address
++
+ +
Payment
+ ++ +
Cover
- -Cover your page.
-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.
-- Learn more -
-Cover
+Cover your page.
+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.
++ Learn more +
+-
-
- - - - Dashboard (current) - - -
- - - - Orders - - -
- - - - Products - - -
- - - - Customers - - -
- - - - Reports - - -
- - - - Integrations - - -
- Saved reports - - - -
--
-
- - - - Current month - - -
- - - - Last quarter - - -
- - - - Social engagement - - -
- - - - Year-end sale - - -
Dashboard
+Dashboard
-Section title
-# | -Header | -Header | -Header | -Header | -
---|---|---|---|---|
1,001 | -Lorem | -ipsum | -dolor | -sit | -
1,002 | -amet | -consectetur | -adipiscing | -elit | -
1,003 | -Integer | -nec | -odio | -Praesent | -
1,003 | -libero | -Sed | -cursus | -ante | -
1,004 | -dapibus | -diam | -Sed | -nisi | -
1,005 | -Nulla | -quis | -sem | -at | -
1,006 | -nibh | -elementum | -imperdiet | -Duis | -
1,007 | -sagittis | -ipsum | -Praesent | -mauris | -
1,008 | -Fusce | -nec | -tellus | -sed | -
1,009 | -augue | -semper | -porta | -Mauris | -
1,010 | -massa | -Vestibulum | -lacinia | -arcu | -
1,011 | -eget | -nulla | -Class | -aptent | -
1,012 | -taciti | -sociosqu | -ad | -litora | -
1,013 | -torquent | -per | -conubia | -nostra | -
1,014 | -per | -inceptos | -himenaeos | -Curabitur | -
1,015 | -sodales | -ligula | -in | -libero | -
Section title
+# | +Header | +Header | +Header | +Header | +
---|---|---|---|---|
1,001 | +Lorem | +ipsum | +dolor | +sit | +
1,002 | +amet | +consectetur | +adipiscing | +elit | +
1,003 | +Integer | +nec | +odio | +Praesent | +
1,003 | +libero | +Sed | +cursus | +ante | +
1,004 | +dapibus | +diam | +Sed | +nisi | +
1,005 | +Nulla | +quis | +sem | +at | +
1,006 | +nibh | +elementum | +imperdiet | +Duis | +
1,007 | +sagittis | +ipsum | +Praesent | +mauris | +
1,008 | +Fusce | +nec | +tellus | +sed | +
1,009 | +augue | +semper | +porta | +Mauris | +
1,010 | +massa | +Vestibulum | +lacinia | +arcu | +
1,011 | +eget | +nulla | +Class | +aptent | +
1,012 | +taciti | +sociosqu | +ad | +litora | +
1,013 | +torquent | +per | +conubia | +nostra | +
1,014 | +per | +inceptos | +himenaeos | +Curabitur | +
1,015 | +sodales | +ligula | +in | +libero | +
Floating labels
+Build form controls with floating labels via the :placeholder-shown
pseudo-element. Works in latest Chrome, Safari, and Firefox.
Floating labels
-Build form controls with floating labels via the :placeholder-shown
pseudo-element. Works in latest Chrome, Safari, and Firefox.
© 2017-2018
-© 2017-2018
+ diff --git a/site/docs/4.1/examples/grid/index.html b/site/docs/4.1/examples/grid/index.html index 966abd6a97..b41090438d 100644 --- a/site/docs/4.1/examples/grid/index.html +++ b/site/docs/4.1/examples/grid/index.html @@ -1,139 +1,126 @@ - - - - - - - - +--- +layout: examples +title: Grid Template +extra_css: "grid.css" +body_class: "py-4" +include_js: false +--- -Bootstrap grid examples
+Basic grid layouts to get you familiar with building within the Bootstrap grid system.
+In these examples the .themed-grid-col
class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
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.
- -Bootstrap grid examples
-Basic grid layouts to get you familiar with building within the Bootstrap grid system.
-In these examples the .themed-grid-col
class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
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.
+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.
+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.
+Two columns
+Get two columns starting at desktops and scaling to large desktops.
+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.
+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.
-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.
-Two columns
-Get two columns starting at desktops and scaling to large desktops.
--
Full width, single column
-- No grid classes are necessary for full-width elements. -
+Mixed: mobile and desktop
+The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). 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.
++
-
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.
-Mixed: mobile, tablet, and desktop
+- -
Mixed: mobile and desktop
-The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). 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.
-- -
Mixed: mobile, tablet, and desktop
--
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
Hello, world!
-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.
- +-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
Hello, world!
+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.
+ +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.
+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.
+ +Heading
+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.
+ +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.
- -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.
- -Heading
-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.
- --
+
Bottom Navbar example
-This example is a quick exercise to illustrate how the bottom navbar works.
- View navbar docs » --
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropup - - -
Bottom Navbar example
+This example is a quick exercise to illustrate how the bottom navbar works.
+ View navbar docs » +-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropup + + +
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
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.
- View navbar docs » -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.
+ View navbar docs » +-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
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.
- View navbar docs » -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.
+ View navbar docs » +-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
-
- - Home (current) - -
- - Link - -
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + -
-
-
- - Centered nav only (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
+
- + Home (current) + +
- + Link + +
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + - + +
-
-
- - Centered nav only (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + - + +
Navbar examples
-This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container
. For positioning of navbars, checkout the top and fixed top examples.
At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
- +-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
-
+
- + Centered nav only (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
-
+
- + Centered nav only (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
Navbar examples
+This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container
. For positioning of navbars, checkout the top and fixed top examples.
At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
+ +-
+
- + Dashboard (current) + +
- + Notifications + +
- + Profile + +
- + Switch account + +
- + Settings + + +
-
-
- - Dashboard (current) - -
- - Notifications - -
- - Profile - -
- - Switch account - -
- - Settings - - -
Bootstrap
+ Since 2011Bootstrap
- Since 2011 +Recent updates
++ @username + 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. +
++ @username + 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. +
++ @username + 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. +
+Suggestions
+Recent updates
-- @username - 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. -
+- @username - 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. -
-- @username - 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. -
-Suggestions
-Pricing
+Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.
+Pricing
-Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.
-Free
-$0 / mo
--
-
- 10 users included -
- 2 GB of storage -
- Email support -
- Help center access -
Pro
-$15 / mo
--
-
- 20 users included -
- 10 GB of storage -
- Priority email support -
- Help center access -
Enterprise
-$29 / mo
--
-
- 30 users included -
- 15 GB of storage -
- Phone and email support -
- Help center access -
Free
+$0 / mo
+-
+
- 10 users included +
- 2 GB of storage +
- Email support +
- Help center access +
Pro
+$15 / mo
+-
+
- 20 users included +
- 10 GB of storage +
- Priority email support +
- Help center access +
Enterprise
+$29 / mo
+-
+
- 30 users included +
- 15 GB of storage +
- Phone and email support +
- Help center access +
Punny headline
+And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.
+ Coming soon +Punny headline
-And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.
- Coming soon -Another headline
+And an even wittier subheading.
Another headline
-And an even wittier subheading.
-Another headline
-And an even wittier subheading.
-Another headline
+And an even wittier subheading.
Another headline
-And an even wittier subheading.
-Another headline
-And an even wittier subheading.
-Another headline
+And an even wittier subheading.
Another headline
-And an even wittier subheading.
-Another headline
-And an even wittier subheading.
-Another headline
+And an even wittier subheading.
Another headline
-And an even wittier subheading.
-Another headline
-And an even wittier subheading.
-Another headline
+And an even wittier subheading.
Another headline
+And an even wittier subheading.
+Another headline
+And an even wittier subheading.
+Another headline
+And an even wittier subheading.
+Please sign in
- - - - -© 2017-2018
-Please sign in
+ + + + +© 2017-2018
+-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
- + Dropdown + + +
Bootstrap starter template
+Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
- - Dropdown - - -
Bootstrap starter template
-Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
-
+
- + Home (current) + +
- + Link + +
- + Disabled + +
Sticky footer with fixed navbar
+Pin a 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 main > .container
.
Back to the default sticky footer minus the navbar.
+-
-
- - Home (current) - -
- - Link - -
- - Disabled - -
Sticky footer with fixed navbar
-Pin a 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 main > .container
.
Back to the default sticky footer minus the navbar.
-Sticky footer
+Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
+Use the sticky footer with a fixed navbar if need be, too.
+Sticky footer
-Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
-Use the sticky footer with a fixed navbar if need be, too.
-