Scribd Logo
Upload

Welcome to Scribd!

  • BOOTSTRAPDATA

    Uploaded by

    Kick Battowski
    9 views3 pages
    The document demonstrates various Bootstrap components such as buttons, alerts, and grouping components. It includes code snippets to generate different sized and styled buttons, button groups, and alerts. The document provides examples of common Bootstrap elements.

    Original Description:

    Bootstrap................

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document demonstrates various Bootstrap components such as buttons, alerts, and grouping components. It includes code snippets to generate different sized and styled buttons, button groups, and alerts. The document provides examples of common Bootstrap elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views3 pages

    BOOTSTRAPDATA

    Uploaded by

    Kick Battowski
    The document demonstrates various Bootstrap components such as buttons, alerts, and grouping components. It includes code snippets to generate different sized and styled buttons, button groups, and alerts. The document provides examples of common Bootstrap elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/
    TYkiZhlZB6+fzT" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
    crossorigin="anonymous"></script>
        <style>
            h1
            {
                background-color:darkcyan;
                color:white;
                text-align: center;
            }
            p
            {
                text-align: justify;
            }
            a{
                text-decoration: none;
            }
        </style>
      </head>
      <body>
        <div class="container-fluid">
            <h2 class="h2">Boostrap Practice</h2>
            <p class="lead text-primary">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, modi! Ad, dolor?
    Deleniti laudantium numquam veritatis ipsam ex. Necessitatibus eos dolorum, ea tempore tempora
    ut, omnis quo vitae rem, veritatis dolorem illum dolor at! Cumque minima voluptatibus, maiores
    repellat temporibus libero aspernatur. Temporibus velit cum voluptates pariatur, enim suscipit
    tempore ducimus exercitationem cumque eligendi impedit inventore mollitia veritatis aut
    officia tempora aliquam debitis culpa earum sapiente quia sunt doloribus voluptas nihil! Magni
    dolor laudantium fuga! Blanditiis eius molestias tempora illo ducimus dolorum, possimus alias
    laboriosam in fuga, enim tempore a perferendis. Tenetur, blanditiis cum nobis accusamus
    laudantium numquam commodi atque.
            </p>
            <h2>Button of Boostrap</h2>
            <hr>
            <button class="btn btn-primary">Process</button>
            <button class="btn btn-success">Process</button>
            <button class="btn btn-info">Process</button>
            <button class="btn btn-warning">Process</button>
            <br><br>
            <button class="btn btn-warning btn-sm">Process</button>
            <button class="btn btn-primary btn-lg">Process</button>
            <br>
            <br>
            <div class="btn-group">
                <button class="btn btn-primary">Process</button>
                <button class="btn btn-success">Process</button>
                <button class="btn btn-info">Process</button>
                <button class="btn btn-warning">Process</button>
                <button class="btn btn-success">Process</button>
                <button class="btn btn-info">Process</button>
                <button class="btn btn-warning">Process</button>
                <button class="btn btn-success">Process</button>
                <button class="btn btn-info">Process</button>
                <button class="btn btn-warning">Process</button>
            </div>
            <br><br>
            <div class="btn-group-vertical">
                <button  class="btn btn-primary">India</button>
                <button  class="btn btn-primary">America</button>
                <button  class="btn btn-primary">Japan</button>
                <button type="button" class="btn btn-primary">Japan</button>
                <button type="button" class="btn btn-primary">Japan</button>
                <button type="button" class="btn btn-primary">Japan</button>
              </div>
              <br>
              <br>
             
             <button class="btn btn-outline-primary"><a href="/carousel.html" target="_blank">This
    is primary</a></button>
             
             <button class="btn btn-outline-success">This is success</button>
             <button class="btn btn-outline-warning">This is success</button>
             <button class="btn btn-outline-danger">This is success</button>
             <br><br>
             <div class="alert alert-success">
                <strong>Success!</strong> Indicates a successful or positive action.
              </div>
              <div class="alert alert-primary">
                <strong>Success!</strong> Indicates a successful or positive action.
              </div>
              <div class="alert alert-danger">
                <strong>Success!</strong> Indicates a successful or positive action.
              </div>
              <div class="alert alert-info">
                <strong>Success!</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
    elit. Neque, voluptatem minima provident ullam nostrum repudiandae dolores quia possimus ut
    mollitia?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus repudiandae
    et velit asperiores esse sit eaque deleniti suscipit, laudantium perferendis. Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Quo, minima error! Sequi quasi nostrum voluptas
    expedita saepe sed, aspernatur fugit. Lorem ipsum dolor, sit amet consectetur adipisicing
    elit. Earum, velit dolores quae officiis, porro vitae aspernatur repellat officia molestias,
    architecto dolore atque consequatur voluptatem minima id hic possimus modi iusto eos. Nihil
    quod exercitationem consequuntur porro modi, voluptas numquam dolor vitae? Ratione cumque
    aspernatur quaerat, iusto eius consectetur dignissimos accusantium voluptatem officiis
    distinctio mollitia asperiores eos dolor animi, ducimus nihil porro, tempore iure error.
    Voluptatum enim quos laudantium laboriosam perspiciatis obcaecati. Rem hic blanditiis ipsum
    adipisci cupiditate recusandae expedita magnam?
              </div>
             

             
             
           
           

           
        </div>
      </body>
    </html>

    You might also like