Bootstrap whole in one

-

Bootstrap Grid:

In col-md-4, -4 means each column will take 4/12 of row and -md means this property will be applied till md breakpoint.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background-color: #292d3e;
        }


        .c {
            background-color: lightblue;
        }

        .cc {
            border: 0.1vw solid red;
        }
    </style>
</head>

<body>
    <div class="c">
        <div class="row">
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
        </div>
        <div class="row">
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
        </div>
        <div class="row">
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
            <div class="cc col-xl-2 col-md-4 col-sm-6">Hello World</div>
        </div>
    </div>




    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>

</html>


Responsive Grid:

6 columns till xl, 4 till medium, 2 till sm, 1 when smaller than sm.

<div class="container text-center">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-xl-6">
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
          <div class="cc col">Column</div>
        </div>
      </div>













Comments

Post a Comment

Popular posts from this blog

Javascript whole in one

-
Image
 Table of contents Link .js to .html and error Commands Variables Get element by id Taking input from the user Type conversion Math functions Calculate Hypoteneus (practice program) Counter (practice program) Random number generator String methods and functions Slice Method chaining If, else if, else If else (Practice Program) Switch Statement Logical Operators (&&, ||, ! ) Loops Break and continue Nested Loops Functions, nested functions, function expression, and arrow function Template Literals VAR vs LET Number guessing game Temperature converter Array Maps Objects This keyword Class Static variables and functions Inheritance Super Keyword Getters and Setters Instanceof operator Passing Object to function Array to Objects Anonymous Objects Simple Garage System Error handling setTimeout( ) setInterval( ) Date Object Simple Clock Program Synchronous and Asynchronous Code Console.time( ) Important Points: If  indexof () ; returns  - 1 , it means this  elemen...
Read more

3: HTML blog's visual content with source code

-
Image
  1: Text sizes Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 2: Hyperlink with hower text and open in new tab or same C++ 3: New page hyperlink and open in same or new tab HTML 4: Different text formating tags This is normal text This is centered text Ittalics Bold Big Small This is  Subscript  text This is  Superscript  text inserted deleted mark 5: Unorderes list: Things I like are: Macaroni Burgers Pizza Pizzas types are: Peperoni Cheese Fagita Crown 6: Ordered list: With numbers: First Second Third Fourth With Uppercase Alphabet First Second Third Fourth With Lowercase Alphabet First Second Third Fourth With Uppercase Roman First Second Third Fourth With Lowercase Roman First Second Third Fourth 7: Discription list: HTML: This adds structure CSS: This adds design Javascript: This adds fucntionality 8: Basic Table: 9: Table with design: Align center, table outines black, row 1 grey center aligned and height 50 row 2 lightgrey center aligned and...
Read more