반응형 테이블

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Mixed: mobile and desktop

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-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 md, lg, xl and xxl, you only need to specify md.

.col-md-8
.col-md-4 .col-6
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixed: mobile, tablet, and desktop

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Placeholder

Heading

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

View details

Placeholder

Heading

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

View details

Placeholder

Heading

And lastly this, the third column of representative placeholder content.

View details


First featurette heading. It’ll blow your mind.

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

Placeholder500x500

Oh yeah, it’s that good. See for yourself.

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

Placeholder500x500

And lastly, this one. Checkmate.

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

Placeholder500x500