.container-xl - CodeGK

Δ Bootstrap4 Examples

Spinners

BootStrap4 Spinners Border Spinners in BootStrap4 Growing-Spinners in BootStrap4 Size of Spinners in BootStrap4 Spinners-Buttons in BootStrap4

Pagination

Pagination in BootStrap4 Pagination with icons in BootStrap4 Pagination with Active State in BootStrap4 Pagination with Disabled State in BootStrap4

Collapse

Collapse in BootStrap4 Multi-Element Collapse in BootStrap4 Accordion in BootStrap4

Badges

Badges in BootStrap4 Internal Badges in BootStrap4 Pill Badges in BootStrap4 Link Badges in BootStrap4

Grid_basic

BootStrap4 Single Column BootStrap4 Multiple equal Column BootStrap4 Multiple unequal Column BootStrap4 Responsive col-sm BootStrap4 Responsive col-md BootStrap4 Responsive col-lg BootStrap4 Responsive col-xl BootStrap4 Responsive unequal columns

Cards

Basic BootStrap4 Card Colored Cards in BootStrap4 Card with Images in BootStrap4

List_group

Group-List in BootStrap4 Active Items of Group List in BootStrap4 Disabled Items of Group List in BootStrap4

Filters

Name Filter in BootStrap4

Containers

.container BootStrap4 .container-sm .container-md .container-lg .container-xl .container-fluid

Progress_bars

Progress Bar in BootStrap4 Labels of Progress Bar in BootStrap4 Height of Progress Bar in BootStrap4 Colored Progress Bars in BootStrap4 Multiple Bars in BootStrap4 Striped Bars in BootStrap4 Animation of Progress Bars in BootStrap4

Icons

Font Awesome in BootStrap4

Images

Responsive-Images in BootStrap4 Image-Thumbnails in BootStrap4 Aligning-Images in BootStrap4

Dropdowns

Basic Dropdown in BootStrap4 Dropdown Link in BootStrap4 Colored Dropdowns in BootStrap4 Split Buttons in BootStrap4 Dropdown Size in BootStrap4 DropUp Button in BootStrap4 DropRight Button in BootStrap4 DropLeft Button in BootStrap4

Buttons

Filled Buttons in BootStrap4 Button Type Outline Buttons in BootStrap4 Button Sizes in BootStrap4 Active Button in BootStrap4 Disabled Button in BootStrap4

Tables

BootStrap4 Basic Table BootStrap4 Stripped Table BootStrap4 Dark Table BootStrap4 Dark Stripped Table BootStrap4 Hoverable Standard Table

Jumbotron

Jumbotron in BootStrap4 Jumbotron Fluid in BootStrap4

Alerts

Alert in BootStrap4 Alert Link in BootStrap4

Colors

BootStrap4 BackGround Color BootStrap4 Text Color BootStrap4 Text Color Opacity BootStrap4 Text Color with BackGround Color is illustrated

♦ .container-xl

♣ Example5: .container-xl

In this example, extra-large variant of containers, ".container-xl" is illustrated.
.container-xl is a responsive class type which is 100% wide until extra-large(1200px wide) breakpoint.
That is the element is 100% wide until the width of browser-window is strictly less than 1200px.

Example

Input:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap4 .container-xl</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-xl">

<h2>Bootstrap4 .container-xl page</h2>
  
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</body>
</html>

Output:

Containers