Success! Indicates a successful or positive action.

Los Angeles

We had such a great time in LA!

Chicago

Thank you, Chicago!

New York

We love the Big Apple!

Toggleable Tabs

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

부트스트랩4 그리드시스템의 적용예시

내용1

내용2

내용3

내용4

Extra Large Modal

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List Group With Badges

Combine .badge classes with utility/helper classes to add badges inside the list group:

Inbox 12
Ads 50
Junk 99

Button Group

The .btn-group class creates a button group:

Progress Bar With Label

Phtoshop 90%

Premoere Pro 80%

Badges

Example heading New

Responsive Columns

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

Media Object

Create a media object with the .media and .media-body classes:

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Grid Classes

The Bootstrap 4 grid system has five classes:

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)