Scribd
Upload
24 views11 pages

Overview of Bootstrap

The document contains three HTML examples showcasing Bootstrap features: a responsive navigation bar with a header and footer, a login page with form inputs, and a photo gallery for Redmi smartphones with modals for full-size images. Each example utilizes Bootstrap's grid system, typography, and components like buttons and cards. The code includes links to Bootstrap CSS and JS for styling and functionality.

Uploaded by

premdandin01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views11 pages

Overview of Bootstrap

The document contains three HTML examples showcasing Bootstrap features: a responsive navigation bar with a header and footer, a login page with form inputs, and a photo gallery for Redmi smartphones with modals for full-size images. Each example utilizes Bootstrap's grid system, typography, and components like buttons and cards. The code includes links to Bootstrap CSS and JS for styling and functionality.

Uploaded by

premdandin01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Bootstrap Example -

<html >

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Example</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<!-- Navigation Bar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container-fluid">

<a class="navbar-brand" href="#">My Website</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link active" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">About</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Contact</a>


</li>

</ul>

</div>

</div>

</nav>

<!-- Header Section -->

<div class="container text-center my-5">

<h1 class="display-4">Welcome to My Bootstrap Page</h1>

<p class="lead">This is a simple example of a Bootstrap-powered webpage.</p>

<button class="btn btn-primary btn-lg">Learn More</button>

</div>

<!-- Grid System Example -->

<div class="container">

<div class="row">

<div class="col-md-4">

<div class="p-3 bg-light border">Column 1</div>

</div>

<div class="col-md-4">

<div class="p-3 bg-light border">Column 2</div>

</div>

<div class="col-md-4">

<div class="p-3 bg-light border">Column 3</div>

</div>

</div>

</div>

<!-- Footer Section -->


<footer class="bg-dark text-white text-center py-3 mt-5">

&copy; 2024 My Website | All Rights Reserved

</footer>

<!-- Bootstrap JS (for interactive components) -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Key Features Demonstrated:

1. Responsive Navigation Bar:

o A collapsible navbar that adapts to smaller screens.

o Includes links for Home, About, and Contact.

2. Typography:

o Uses Bootstrap's text utilities like display-4 for large text and lead for a secondary heading.

3. Grid System:

o Demonstrates a 3-column layout that adjusts automatically on different screen sizes.

4. Buttons:

o Uses a primary button (btn-primary) with large size (btn-lg).

5. Footer:

o A simple footer with a dark background and white text.


Login Page –
<html >

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Login Page</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container d-flex justify-content-center align-items-center vh-100">

<div class="card p-4 shadow-lg" style="width: 400px;">

<h3 class="text-center mb-4">Login</h3>

<form>

<!-- Email Input -->

<div class="mb-3">

<label for="email" class="form-label">Email Address</label>

<input type="email" class="form-control" id="email" placeholder="Enter your email"


required>

</div>

<!-- Password Input -->

<div class="mb-3">

<label for="password" class="form-label">Password</label>

<input type="password" class="form-control" id="password" placeholder="Enter your


password" required>

</div>

<!-- Remember Me Checkbox -->

<div class="mb-3 form-check">


<input type="checkbox" class="form-check-input" id="rememberMe">

<label class="form-check-label" for="rememberMe">Remember Me</label>

</div>

<!-- Submit Button -->

<div class="d-grid">

<button type="submit" class="btn btn-primary">Login</button>

</div>

</form>

<div class="text-center mt-3">

<p class="small">

Don't have an account? <a href="#" class="text-decoration-none">Sign up</a>

</p>

</div>

</div>

</div>

<!-- Bootstrap JS (for interactive components) -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>
Bootstrap Code for a Photo Gallery of Redmi Smartphone Products –

<html >

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Redmi Smartphone Gallery</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<!-- Header -->

<div class="container text-center my-5">

<h1 class="display-5">Redmi Smartphone Gallery</h1>

<p class="lead">Explore the latest Redmi smartphone models with high-quality images.</p>

</div>

<!-- Photo Gallery -->

<div class="container">

<div class="row g-4">

<!-- Image 1 -->

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Redmi Model 1"


data-bs-toggle="modal" data-bs-target="#modal1">

<div class="card-body text-center">

<h5 class="card-title">Redmi Note 12 Pro</h5>

<p class="card-text">Capture every detail with precision and style.</p>


</div>

</div>

</div>

<!-- Image 2 -->

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Redmi Model 2"


data-bs-toggle="modal" data-bs-target="#modal2">

<div class="card-body text-center">

<h5 class="card-title">Redmi Note 12 5G</h5>

<p class="card-text">Experience blazing-fast speed with 5G connectivity.</p>

</div>

</div>

</div>

<!-- Image 3 -->

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Redmi Model 3"


data-bs-toggle="modal" data-bs-target="#modal3">

<div class="card-body text-center">

<h5 class="card-title">Redmi K60 Ultra</h5>

<p class="card-text">Redefine power and elegance with flagship features.</p>

</div>

</div>

</div>

</div>

</div>

<!-- Modals for Full-Size Images -->


<!-- Modal 1 -->

<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-


hidden="true">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="modal1Label">Redmi Note 12 Pro</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>

</div>

<div class="modal-body">

<img src="https://via.placeholder.com/800x600" class="img-fluid" alt="Redmi Note 12 Pro">

</div>

</div>

</div>

</div>

<!-- Modal 2 -->

<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-


hidden="true">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="modal2Label">Redmi Note 12 5G</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>

</div>

<div class="modal-body">

<img src="https://via.placeholder.com/800x600" class="img-fluid" alt="Redmi Note 12 5G">

</div>
</div>

</div>

</div>

<!-- Modal 3 -->

<div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="modal3Label" aria-


hidden="true">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="modal3Label">Redmi K60 Ultra</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>

</div>

<div class="modal-body">

<img src="https://via.placeholder.com/800x600" class="img-fluid" alt="Redmi K60 Ultra">

</div>

</div>

</div>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

You might also like