DataFlair

Bootstrap Tutorials

Bootstrap Forms 0

Bootstrap Tutorials

Bootstrap Forms

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <form> <div> <label class=”form-label”>Email:</label> <input type=”email” class=”form-control”> </div> <div> <label class=”form-label”>Password:</label> <input type=”password” class=”form-control”> </div> <div> <label class=”form-label”>Gender:</label> Male:<input...

Bootstrap Carousel 0

Bootstrap Tutorials

Bootstrap Carousel

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div id=”demo” class=”carousel slide” data-bs-ride=”carousel”> <div class=”carousel-indicators”> <button type=”button” data-bs-target=”#demo” data-bs-slide-to=”0″ class=”active”></button> <button type=”button” data-bs-target=”#demo” data-bs-slide-to=”1″></button> <!–<button type=”button” data-bs-target=”#demo”...

Bootstrap Collapse 0

Bootstrap Tutorials

Bootstrap Collapse

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <button data-bs-toggle=”collapse” data-bs-target=”#demo”>Click</button> <div id=”demo” class=”collapse show”> This is collapsible content </div> </body> </html>  

Bootstrap Navigation Bar Part – 2 0

Bootstrap Tutorials

Bootstrap Navigation Bar Part – 2

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”>Logo</a> <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#collapsibleNavbar”> <span class=”navbar-toggler-icon”></span> </button>...

Bootstrap Navigation Bar Part – 1 0

Bootstrap Tutorials

Bootstrap Navigation Bar Part – 1

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <nav class=”navbar bg-primary”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”> <img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2d7bF1q2WBQnHUhqaR2OuxjFiv_EIWBwqow&s” style=”width:40px;”> </a> <ul class=”navbar-nav”> <li class=”nav-item”>Item1</li> <li class=”nav-item”>Item2</li> </ul>...

Bootstrap Dropdowns Part – 2 0

Bootstrap Tutorials

Bootstrap Dropdowns Part – 2

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div class=”btn-group-vertical”> <button type=”button” class=”btn btn-primary”>Apple</button> <button type=”button” class=”btn btn-primary”>Samsung</button> <button type=”button” class=”btn btn-primary dropdown-toggle” data-bs-toggle=”dropdown”>Sony</button> <ul class=”dropdown-menu”> <li><a...

Bootstrap Dropdowns Part – 1 0

Bootstrap Tutorials

Bootstrap Dropdowns Part – 1

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script> </head> <body> <div class=”dropup”> <button type=”button” class=”btn btn-primary dropdown-toggle” data-bs-toggle=”dropdown”>Items</button> <ul class=”dropdown-menu”> <li><h4 class=”dropdown-header”>Header</h4></li> <li><a class=”dropdown-item active” href=”#”>Link1</a></li> <li><a class=”dropdown-item disabled”...

Bootstrap Cards Part – 2 0

Bootstrap Tutorials

Bootstrap Cards Part – 2

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script> </head> <body> <div class=”card” style=”width:500px;”> <img class=”card-img-top” src=”C:\\Users\\Lenovo\\Downloads\\bird.jpg”> <div class=”card-img-overlay”> <h4 class=”card-title”>Bird</h4> <p class=”card-text”>Some text</p> </div> </div> </body> </html>  

Bootstrap Cards Part – 1 0

Bootstrap Tutorials

Bootstrap Cards Part – 1

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div class=”card bg-secondary”> <div class=”card-header”>Header</div> <div class=”card-body”> <h4 class=”card-title”>Card title</h4> Basic card</div> <p class=”card-text”>Some text</p> <a href=”#” class=”card-link”>Card link</a>...

Bootstrap List Groups 0

Bootstrap Tutorials

Bootstrap List Groups

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <ul class=”list-group list-group-numbered list-group-horizontal list-group-flush”> <a class=”list-group-item list-group-item-action list-group-item-success active”>First</a> <a class=”list-group-item list-group-item-action list-group-item-warning”>Second</a> <a class=”list-group-item list-group-item-action”>Third</a> </ul> </body>...