Custom jumbotron

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

Example button

Change the background

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

Example button

Add borders

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

Example button

Icon grid

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Centered screenshot

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Primary button
Secondary
Example image

Custom cards

Short title, long jacket

  • Bootstrap
  • Earth
  • 3d

Much longer title that wraps to multiple lines

  • Bootstrap
  • Pakistan
  • 4d

Another longer title belongs here

  • Bootstrap
  • California
  • 5d
Category

Beyond The Naked Eye

Many different ways today to find information online, it can sometimes be hard to know where to go to first. I want to look…

Category

Telescopes 101

Many different ways today to find information online, it can sometimes be hard to know where to go to first. I want to look…

Category

Asteroids

Many different ways today to find information online, it can sometimes be hard to know where to go to first. I want to look…

Category

Telescopes 101

Many different ways today to find information online, it can sometimes be hard to know where to go to first. I want to look…

Category 2

Advertisers Embrace Rich Media Format

Many of us are so used to working on a computer desktop that when it comes time to purchase a new computer, we don’t consider  

Dark mode hero

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Primary button
Secondary

Vertically centered hero sign-up 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.

成功!你已经做到了。
错误!该值无效。
成功!你已经做到了。
错误!该值无效。

By clicking Sign up, you agree to the terms of use.

Like rock stars, asteroids have been given their fair share of urban myth and lore. Many have attributed the extinction of the dinosaurs to the impact of a huge asteroid on the earth.