Scribd
Upload
7 views2 pages

Bootstrap

The document provides examples of various Bootstrap components including a grid layout, a responsive navbar, forms, cards, buttons, and alerts. Each section includes HTML code snippets demonstrating how to implement these components. The examples emphasize Bootstrap's utility for creating responsive and visually appealing web designs.

Uploaded by

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

Bootstrap

The document provides examples of various Bootstrap components including a grid layout, a responsive navbar, forms, cards, buttons, and alerts. Each section includes HTML code snippets demonstrating how to implement these components. The examples emphasize Bootstrap's utility for creating responsive and visually appealing web designs.

Uploaded by

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

Boostrap

1.Grid
<div class="container">
<div class="row">
<div class="col-md-4">Cột 1</div>
<div class="col-md-4">Cột 2</div>
<div class="col-md-4">Cột 3</div>
</div>
</div>

2.Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
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 active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>

3.Responsive
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">Cột 1</div>
<div class="col-sm-12 col-md-6 col-lg-4">Cột 2</div>
<div class="col-sm-12 col-md-6 col-lg-4">Cột 3</div>
</div>

4.Form
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

5.Card
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Card content goes here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

6.Button
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

7.Alert
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>

You might also like