Text Formatting 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 Formatting Classes Bootstrap CSS</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/Text_Formatting_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 text-uppercase">Text Formatting Classes</h2>
        <h2 class="mt-3 mb-5 text-center fw-light">Font Weight Light</h2>
        <h2 class="text-center fst-italic">Font Italic</h2>
        <div class="row">
            <div class="col-md-4 py-3 mx-auto">
                <h3 class="text-danger text-capitalize">sub heading</h3>
                <h3 class="text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae,
                    aspernatur.</h3>
                <h3 class="text-break">LoremipsumdolorsitametconsecteturadipisicingelitImpeditaliquam.</h3>
                <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia iste architecto
                    dolorem, eaque
                    consectetur repellendus. Deserunt sit quibusdam veritatis tempore amet pariatur atque cupiditate
                    minima doloribus enim id ullam soluta, tempora libero voluptas aliquid rerum.</p>
            </div>
            <div class="col-md-4 py-3 mx-auto font-monospace">
                <h3 class="text-danger text-lowercase text-nowrap">SUB HEADING Lorem ipsum dolor sit amet.</h3>
                <a href="" class="text-reset">Hello World</a>
                <p class="text-lg-center fw-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis debitis
                    a earum dignissimos libero
                    accusantium, et aut quas nulla neque unde alias quae quaerat molestias distinctio cupiditate
                    deleniti dicta eaque voluptatem quibusdam! Quidem, iste necessitatibus!</p>
            </div>
        </div>
    </div>
</body>

</html>





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

.mx-auto {
    background: #ffc0cb;
}

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







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