Color and Background Color Classes in Bootstrap CSS

 <!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>Color Background Classes Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/Color_Background_Color_Classes_Bootstrap.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 mt-5">
        <h2 class="mt-3 mb-5 text-center bg-danger">Color & Background Color</h2>
        <div class="row">
            <div class="col-md-3 bg-primary">
                <h3>Sub Heading</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum doloremque nemo nulla facilis
                    voluptas quibusdam aut. Voluptas animi eligendi placeat veniam aliquid. Velit corporis corrupti
                    distinctio amet ut dignissimos ad nesciunt, est possimus sunt quo.</p>
            </div>
            <div class="col-md-3 bg-secondary">
                <h3>Sub Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nulla nesciunt odit pariatur adipisci
                    consequuntur vitae omnis vel? Facilis modi quaerat ducimus veniam beatae fuga animi ad possimus.
                    Iure voluptatibus deserunt porro vel quisquam at.</p>
            </div>
            <div class="col-md-3 bg-success">
                <h3>Sub Heading</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est officiis optio doloremque nobis ducimus
                    ab quisquam corporis omnis ipsam delectus velit consequatur libero eum fugit dolorem tenetur
                    consequuntur voluptatum fugiat, architecto eaque maxime deserunt sint.</p>
            </div>
            <div class="col-md-3 bg-warning">
                <h3>Sub Heading</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde minus, tempora asperiores iusto beatae
                    eveniet? Laboriosam quo maiores velit, consequuntur ex minus, quaerat, molestias asperiores id
                    recusandae ducimus animi voluptatum perferendis natus obcaecati reiciendis quasi.</p>
            </div>
        </div>
    </div>

    <div class="container">
        <h2 class="mt-3 mb-5 text-center">Color & Background Color</h2>
        <div class="row">
            <div class="col-md-3 bg-primary text-white">
                <h3 class="text-black-50">Sub Heading</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas similique esse aut libero
                    accusantium repellat porro quasi! Harum cupiditate fuga autem minus natus exercitationem qui totam
                    atque asperiores, culpa consectetur quidem odio suscipit maxime est.</p>
            </div>
            <div class="col-md-3 bg-info">
                <h3 class="text-danger">Sub Heading</h3>
                <p class="text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique dolorum dolor,
                    provident
                    exercitationem quibusdam accusamus hic? Eum animi exercitationem facere deleniti quas, consequuntur
                    eaque qui minus itaque dignissimos, eveniet sequi perspiciatis voluptatum enim numquam optio?</p>
            </div>
            <div class="col-md-3 bg-dark text-white">
                <h3 class="text-warning">Sub Heading</h3>
                <p class="text-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam eum at quae iure
                    delectus quis,
                    explicabo deleniti animi illo non impedit, molestias enim dignissimos, unde aspernatur quidem
                    doloribus harum reiciendis! Accusantium laboriosam alias laborum doloremque.</p>
            </div>
            <div class="col-md-3 bg-danger">
                <h3 class="text-white-50">Sub Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, earum accusantium? Sunt illo, sint,
                    quae deserunt consectetur quas non quasi eos esse est magni, aut molestiae! Cupiditate blanditiis
                    doloremque itaque. Aspernatur eveniet sunt praesentium ipsum.</p>
            </div>
        </div>
    </div>
</body>

</html>





Below File is Color_Background_Color_Classes_Bootstrap.css File.
.container {
    border: 5px solid #000000;
}

.bg-dark {
    color: #ffffff;
}

h2 {
    background: var(--bs-purple);
    color: var(--bs-yellow);
}




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