1BA579AA-EB98-4DCE-8C7B-D4E1E773E616339D0FC3-B446-45E1-8CBD-812A50097E4BD3A50CCD-4257-4AD7-A291-4F318992F88CC0F878A9-8DC0-47D3-B49E-56D911621C81F393BA8F-94AD-4EAC-AD9B-39653105F1C87FB1D783-C9C7-444E-B01A-45F779F5D5FBC2829838-ED94-4720-A2DC-A111650B00BCE6879AB3-7536-456C-A683-609A096C4F8222C5A416-0697-4C2F-8666-95383644FDCB40163839-1DB6-46D5-A697-0935211FFA0A29F8D52A-011B-4676-A266-3E8EA0F7F4BFCCD35D30-F3D7-45F0-BF67-CEF6BC6D606F202C6550-E7A0-4DD2-BF15-FB55559F26AFFDE0836C-62E2-4FE2-9627-224E5D09CF466FE42265-BD67-4EE7-901B-404B3ACEBE56B8D65D47-71D8-48BB-B1DF-4D630627BAC8F2989D34-2626-4FDB-B36E-A79D2BE52C7242F200F8-EADE-42AC-9F09-63615B04670242F200F8-EADE-42AC-9F09-63615B04670271E2FC71-BFE0-4F7B-AD54-C9A77339790E537B8FEC-F7FF-4A02-AABD-9E5A85C88385760E57AF-1EE5-4890-9635-D6E0160A0DB43468193C-7F9E-481C-B8E7-46ABAC9984F1D5B17A24-40CB-42BB-9AC7-5FA808306FA4920F9058-1AE6-401E-A926-C54FD810AD48E49DB335-86E4-4A60-84CA-ED09ECA9288981CF6103-788C-494E-9DED-271ADEAA7E96B77A86A3-BB4C-418E-951B-188FF35EB4AF3FD44831-A12A-46B0-9AD2-1A2BBC9B7A0F3492609E-D55A-4678-955E-4CAC6E9BC8D8BE2BB9CA-3D90-44DE-9B42-77A1CE08E3BF1C2A57BD-3AE7-4063-8C6B-AA7F4EAA129E3A39A46C-91B2-465F-9DC8-FA357B9CC4EB341BE4EB-0F1B-49DB-816A-9A36B1DF986907D556D6-480D-47A6-8FC2-AAD19BC2D1E220E2B905-7E6D-4CE4-B488-71FE5ECE596971A66494-5D2B-4C6A-A91B-CAFE15DBCDC3E6A84B4F-D5E2-42A3-88F8-23E60C1CE2A58654BE3D-EA82-4E0A-91B7-2F392EB55358BC23778E-0FB3-4B70-A7AD-BE6026D721828F95929F-BF51-4602-9B38-0956AF8001960DA07934-8634-4452-93FA-91490ACDD573339F495A-FB3A-43EE-84A1-AB25648D24D906D762F8-552F-4DC4-B6A2-8B63B1C1527B6432CD5F-BE7E-4FF6-A5F1-15B542C896BCD7D2FE1A-8A6C-480D-8A9F-64D3B8503231AADBDDEF-9E67-4895-8C82-AC5BBBEF2F2AE1B8B11F-4B4B-470A-A625-5A5E6161DA9FE1B8B11F-4B4B-470A-A625-5A5E6161DA9F19B2C7CB-7201-4A06-B3F6-A991AB430960D392F913-E4F9-466C-BBF5-0D7CFAE20E5189B9F08D-4467-440C-8C48-7DA2D3A096C0E4A50452-F236-4833-B713-6872CC6A1F6BF56A6B20-4DDB-4EE4-8AA9-B4593B65CFDF0ED47226-91E4-4BEA-89DB-8B1D043689AAC39DFE03-7BA4-4A27-AE11-5F9B4CB1B821F0EE6383-50B6-4789-89B2-525917BAE319290818A2-44D9-4995-829D-781E34004E37AAA306E4-BC4A-44A6-ACCB-3A961F81A9D0EF6D907C-842F-4839-899E-FBD70ECB97937F294FF7-78F7-47C3-87EA-853FF72042582623E5C1-077F-4FFD-B6AC-EFE384DC8ED9F1FD1E9F-F54F-4708-A4D5-15EDD7A20BBDCDF2F927-BF6F-4527-BA16-FDF9675B7129AFEFCCB4-0F7D-4E59-8E85-3E8F23BCA00616B6E5DC-3231-4F7E-839D-FC19B44070AD4288E0DB-B1BF-4DDC-AA6F-3239B58D656CAFC62FBF-A03F-4423-8C1B-A28CFD7F6CDBE5394C53-A4D3-4427-BA97-D84E0637055644D79279-419D-4CC3-A577-11CD803D52534E6C09B5-63AB-4DC3-AC81-3CA8C78802E739532650-D71B-4342-A66F-D357AA35B2E6927FDEA4-A823-4050-ADAF-CAC67C4DE9B90244C2F6-A106-42F5-B657-7D3C02E8AC3802ACFF18-16DD-4AE4-82FC-1374B6A3DA111E3D5D04-79F1-4C0B-8600-56EFA4C3AEAE08AE6BDE-104E-4F1B-AE43-7673B424F555AB2453B8-8226-4C65-AC75-5425FE2A2CE5232FE519-7B6E-4413-8721-5B9185FB6869D7D957FA-217B-449D-BC3A-2D236E102E2D9247246F-4F96-4522-9F05-90A09DDE4E9A326F5394-3290-4789-A4F3-F70938FE45BC53406097-C21A-4011-94DE-2E73216CF25953406097-C21A-4011-94DE-2E73216CF2598F95929F-BF51-4602-9B38-0956AF800196BE8E1A0D-7357-43C5-933A-60D168FDBBD470D68E02-F789-4EC0-8A37-C2CEB36FB7D5payment-amex payment-aura payment-card payment-cvv payment-diners payment-discover payment-elo payment-mastercard payment-masterpass-2 payment-masterpass payment-passbook payment-paypal-branco payment-paypal payment-visa payment-visacheckout Combined ShapeCreated with Sketch. 6FC71F2B-4B51-469E-A1D3-F7925F986ADF76694A84-E473-4235-8811-E7A10CB0522C73536C20-1FA2-453C-8095-7ECBD021C855EFAE1B02-8A5E-45D9-A4C1-0187C71EB4CEE8DBB542-CB2E-4B87-9E42-10D723530A7509B848F2-0CC1-4B2A-AF8A-8ECBFBA2E15FAA8BA63C-C149-453A-BD2E-7F099516342E7ED54ADD-309F-4E10-8602-FD776A3875EB4419C3EC-EB49-41F4-BC00-E2AFD009263FF4F5CB75-BB9C-4F60-BBDA-C62522AD7E80E2132172-ED58-4C64-9EBC-6E7DB3143E37F1C155B7-3AD7-430C-8B64-525DD915C0FD1787A889-A8C7-47AF-99D7-00D2E3DF552ECreated with sketchtool. A6C274DA-DBC7-4CF2-8888-C19FAD76AD41Created with sketchtool. 7573326F-74A3-46D4-818C-DC535C66AF67loading2 B82D52E6-4DB6-4DFB-90E7-0501860A2269Created with sketchtool. logo-tudus logo-universal logo_statum E872A65E-2F7B-430E-A43B-2E3F2A9F47CC
Skip to main content

Examples

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

Download the Bootstrap source code to snag these examples.

Framework

Examples that focus on implementing uses of built-in components provided by Bootstrap.

Starter template

Nothing but the basics: compiled CSS and JavaScript.

Grids

Multiple examples of grid layouts with all four tiers, nesting, and more.

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

Taking the default navbar component and showing how it can be moved, placed, and extended.

Navbar

Super basic template that includes the navbar along with some additional content.

Static top navbar

Super basic template with a static top navbar along with some additional content.

Fixed navbar

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.

Album

Simple one-page template for photo galleries, portfolios, and more.

Cover

A one-page template for building simple and beautiful home pages.

Carousel

Customize the navbar and carousel, then add some new components.

Blog

Simple two-column blog layout with custom navigation, header, and type.

Dashboard

Basic admin dashboard shell with fixed sidebar and navbar.

Sign-in page

Custom form layout and design for a simple sign in form.

Justified nav

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

Sticky footer

Attach a footer to the bottom of the viewport when the content is shorter than it.

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.

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.