Text and List Styling Classes 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>Text List Style Classes Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/Text_List_Style_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, 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">
        <h2 class="mt-3 mb-5 text-center display-1">Text Formatting Classes</h2>
        <div class="row">
            <div class="col-md-4">
                <ul class="list-unstyled">
                    <li>Orange</li>
                    <li>Apple</li>
                    <li>Banana</li>
                    <li>Grapes</li>
                </ul>
                <ul class="list-inline">
                    <li class="list-inline-item">Orange</li>
                    <li class="list-inline-item">Apple</li>
                    <li class="list-inline-item">Banana</li>
                    <li class="list-inline-item">Grapes</li>
                </ul>
            </div>
            <div class="col-md-4 py-3">
                <h3 class="text-danger display-3">Sub Heading</h3>
                <p class="lead user-select-all">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas saepe
                    quia ducimus nobis
                    sunt
                    voluptatibus neque, velit iste reprehenderit. Incidunt, nisi animi cum veniam cumque ad!
                    Consequatur, maxime placeat? Voluptatibus odio doloremque quaerat quo nobis!</p>
            </div>
            <div class="col-md-4 py-3">
                <h3 class="text-primary display-2">Sub Heading</h3>
                <p class="lead user-select-none">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero iure
                    consequuntur
                    reprehenderit laborum ipsam harum magnam quas. Minus non necessitatibus obcaecati ad recusandae
                    provident blanditiis dolore fuga odit accusamus suscipit asperiores ducimus ut, perferendis
                    mollitia?</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit accusantium similique expedita
                        dicta? Beatae, animi?</p>
                    <footer class="blockquote-footer">-- Hello World</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>

</html>




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

.col-md-4 {
    background: #ffc0cb;
}






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