BootStrap4 Responsive col-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

♦ BootStrap4 Responsive col-xl

♣ Example7: BootStrap4 Responsive col-xl

In this example, Responsive Columns are illustrated for col-xl variant.

Example

Input:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap4 Responsive col-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>

<style>
div{
  color:white;
  font-weight: bold;
}
</style>
</head>
<body>

<h2>Four Responsive col-xl</h2>
<h3>Resize the width of browser-window to see effects.</h3> <br><br><br>
<div class="container-fluid">

<div class="row">

<div class="col-xl" style="background-color:red;">col1</div>
    <div class="col-xl" style="background-color:green;">col2</div>
    <div class="col-xl" style="background-color:blue;">col3</div>
    <div class="col-xl" style="background-color:black;">col4</div>

</div>

</div>

</body>
</html>

Output:

Grid_basic