User Sidebar
  Pin   Dark
   Home    Bio-Data    Educations 4    Skills 34    Experiences    Certificates 7    Programs 134    Projects 39    Accounts 5    Documents    Personal Profile    Interests    Aspirations    Images 59    Videos 3    Contact    Others    Declaration    End

active Class Makes The Button Appear Pressed
Program Info
Program Code
Download Program
×

active Class Makes The Button Appear Pressed

we adding active class that makes the button appear pressed.

Footer

×

active Class Makes The Button Appear Pressed

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button</h2>
  <p>The .active class makes the button appear pressed:</p>            
  <button type="button" class="btn btn-primary">Primary button</button>      
  <button type="button" class="btn btn-primary active">Active primary button</button>
  <br><br>
  <button type="button" class="btn btn-info">Info button</button>      
  <button type="button" class="btn btn-info active">Active info button</button>
</div>

</body>
</html>

Footer

alert Class Creates an Alert Message Box
Program Info
Program Code
Download Program
×

alert Class Creates an Alert Message Box

We adding alert class that creates an alert message box.

Footer

×

alert Class Creates an Alert Message Box

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>
  <p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>
</div>

</body>
</html>

Footer

collapse Class Hides The Content
Program Info
Program Code
Download Program
×

collapse Class Hides The Content

We adding collapse class that hides the content.

Footer

×

collapse Class Hides The Content

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

Footer

d-inline-flex Class Creates an Inline Flexbox Container
Program Info
Program Code
Download Program
×

d-inline-flex Class Creates an Inline Flexbox Container

We adding d-inline-flex class that creates an inline flexbox container.

Footer

×

d-inline-flex Class Creates an Inline Flexbox Container

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body> 

<div class="container mt-3">
  <h2>Inline Flex</h2>
  <p>To create an inline flexbox container, use the d-inline-flex class:</p>
  <div class="d-inline-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>

</body>
</html>

Footer

disabled Class Makes The Button Disabled
Program Info
Program Code
Download Program
×

disabled Class Makes The Button Disabled

We adding disabled class that makes the button disabled.

Footer

×

disabled Class Makes The Button Disabled

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button</h2>
  <p>The disabled attribute makes the button disabled:</p>            
  <button type="button" class="btn" disabled="disabled">Disabled default button</button>
  <br><br>
  <p>The .disabled class makes the link button disabled:</p>                  
  <a href="#" class="btn btn-info disabled" role="button">Disabled info link</a>      
</div>
    
</body>
</html>

Footer

dropdown Class Indicates a Dropdown Menu
Program Info
Program Code
Download Program
×

dropdown Class Indicates a Dropdown Menu

We adding dropdown class that indicates a dropdown menu.

Footer

×

dropdown Class Indicates a Dropdown Menu

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

Footer


×

  •    Home
  •    Bio-Data
  •    Educations 4
  •    Skills 34
  •    Experiences
  •    Certificates 7
  •    Programs 134
  •    Projects 39
  •    Accounts 5
  •    Documents
  •    Personal Profile
  •    Interests
  •    Aspirations
  •    Images 59
  •    Videos 3
  •    Contact
  •    Others
  •    Declaration
  •    End
Name : Krishna Verma    |    Father's Name : Mr. Satish Kumar    |    Email ID : krishnaverma28081997@gmail.com    |    Religion : Hindu    |    Address : Dayampur, kanker khera, Meerut Cantt (250001), UP    |    Date of Birth : 28 August 1997    |    Marital Status : Non-Married    |    Place of Birth : Dayampur Kanker Khera Meerut Cantt.    |    Gender : Male    |    Age : 28    |    Contact : 9520335394    |    Father's Occupation : Sports man    |    Mother's Name : Smt. Kuntesh Devi    |    Mother's Occupation : Homemaker    |    Number of Brothers : 1    |    Number of Sisters : 1    |    Current Residence : Dayampur kanker khera meerut cantt    |    Family Type : Nuclear Family    |    Family Name : verma    |    Height : 5' 6''    |    Weight : 70 kg    |    Complexion : Fair    |    Body Type : Athletic    |    Hair Color : Black    |    Health Status : Good    |    Any Physical Disability : No    |    Highest Qualification : B.Tech (CSE)    |    Master Skill : PHP Laravel    |    Total Projects : 40 +    |    Total Skills : 25 +    |    Languages Known : Hindi and English    |    Website : krishnaportfolio.in    |    Siblings : 3    |    Nationality : Indian    |    Total Experience : 5 Years    |    LinkedIn : https://www.linkedin.com/in/krishna-verma-840b71356/    |    Total Programs : 10000    |    Total Projects : 40    |    Total Skills : 25    |    Total Experience : 5    |    Total DSA Problems : 165    |    Total Served Companies : 2