Grid Col Class in Bootstrap CSS tutorial

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid Col Class</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!--How to make Website Layout with Bootstrap ?-->
    <!--3 Bootstrap CSS Classes : Container, Row, Col-->
    <!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
    <!--Total width of Grid in Every row is 12-->
    <!--Col Class for different Break Points-->
    <!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
    <!--Total width of Column Grid must be maximum 12 in one Row-->
    <div class="container">
        <div class="row">
            <div class="col-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem autem minima voluptatum
                animi nihil assumenda aliquam earum expedita libero optio.</div>
            <div class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore qui a, placeat
                provident fuga modi.</div>
        </div>
        <div class="row">
            <div class="col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis aperiam non fuga
                perferendis dolor ducimus alias. Autem aspernatur mollitia id?</div>
            <div class="col-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, odio! Dolores
                necessitatibus praesentium magni accusantium eaque distinctio rem labore expedita quia! Iure tempora
                porro repellendus a. Neque nam iure perspiciatis eius dignissimos! Amet ullam accusantium temporibus
                inventore asperiores dolorem omnis.</div>
            <div class="col-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ratione natus doloribus
                repudiandae reprehenderit ipsam, laboriosam dicta accusamus iure minus accusantium ipsa optio asperiores
                vel doloremque nostrum a. Velit dolorem eos sequi perferendis tempore fuga vitae accusamus et commodi
                ipsum?</div>
        </div>
    </div><br><br><br>
    <div class="container">
        <div class="row">
            <div class="col-12" id="header">
                <h1>Website Name</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-12" id="menu">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3" id="sidebar">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </div>
            <div class="col-md-6" id="content">
                <h2>Sub Heading</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe labore soluta itaque fugit expedita,
                    facilis tenetur? Perferendis laboriosam nulla inventore distinctio saepe odio exercitationem, at
                    adipisci facilis laudantium, aspernatur, a officiis sapiente. Modi, asperiores nam. Excepturi
                    laborum eum incidunt reiciendis odio voluptates corrupti adipisci aut quae, assumenda nihil
                    explicabo illo aliquam, nostrum sunt velit voluptate facilis expedita quibusdam natus! Vel, sapiente
                    dolore aliquam corrupti excepturi voluptate rem nam iure eum atque ipsa voluptas porro ab quae
                    consequatur reprehenderit, exercitationem facilis error tempora labore animi maxime at cupiditate
                    iste? Possimus reiciendis eveniet accusantium error asperiores at quidem maiores maxime? Nostrum
                    veniam ab placeat saepe dolorum laboriosam, non, magni, natus pariatur beatae nulla. Debitis
                    sapiente saepe voluptate accusamus delectus rerum laudantium quod mollitia repudiandae! Tempore,
                    quis eos.</p>
            </div>
            <div class="col-md-3" id="sidebar">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="row" id="footer">
            <div class="col-12">
                @copyright 2020.
            </div>
        </div>
    </div><br><br><br><br>
</body>

</html>





Below File is css/style.css File.
.container {
    /* border: 5px solid #000000; */
    border: 0px solid #000000;
}

.container-fluid {
    border: 8px solid #000000;
}

.row {
    /* border: 3px solid #ff0000; */
    border: 0px solid #ff0000;
}

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    /* border: 5px solid #008000; */
    border: 0px solid #008000;
}

body {
    background: #808080;
}

#header {
    background: #ffa500;
    padding: 10px 0 10px 10px;
}

#menu {
    background: #ffc0cb;
    padding: 3px 0px;
}

#menu ul {
    list-style: none;
    margin: 0;
}

#menu ul li {
    display: inline-block;
}

#content {
    background: #ffffff;
}

#sidebar {
    background: #add8e6;
}

#footer {
    background: #ffa500;
}














Comments

Post a Comment

Popular posts from this blog

Badge Classes in Bootstrap CSS tutorial

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Badge Classes Bootstrap CSS </ title >     < link rel = "stylesheet" href = "css/bootstrap.css" >     < link rel = "stylesheet" href = "css/Badge_Classes_Bootstrap_CSS.css" > </ head > < body >     <!--How to make Website Layout with Bootstrap ?-->     <!--3 Bootstrap CSS Classes : Container, Row, Col-->     <!--When use "Col" Class ? Answer: For Equal Width Div Tag-->     <!--Total width of Grid in Every row is 12-->     <!--Col Class for different Break Points-->     <!--Extra Large:col-lg, Larg...
Read more

Modal Plugin tutorial in Bootstrap CSS

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Modal Plugin Bootstrap CSS </ title >     < link rel = "stylesheet" href = "css/bootstrap.css" >     < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"         integrity = "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"         crossorigin = "anonymous" ></ script >     < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"         integrity = "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"         ...
Read more

Progress Bar Classes in Bootstrap CSS tutorial

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Progress Bar Classes Bootstrap CSS </ title >     < link rel = "stylesheet" href = "css/bootstrap.css" >     < link rel = "stylesheet" href = "css/Progress_Bar_Classes_Bootstrap_CSS.css" > </ head > < body >     <!--How to make Website Layout with Bootstrap ?-->     <!--3 Bootstrap CSS Classes : Container, Row, Col-->     <!--When use "Col" Class ? Answer: For Equal Width Div Tag-->     <!--Total width of Grid in Every row is 12-->     <!--Col Class for different Break Points-->     <!--Extra Larg...
Read more