How to add Bootstrap to HTML / Project
| Share:
https://fundaofwebit.com/post/how-to-add-bootstrap-to-html-project
Copy Link
How to add Bootstrap to HTML | Add Bootsrap 5 to your project
Hi guys,
In this post, you will be learning how to add or integrate Bootstrap to html / php / project.
Bootstrap is a popular front-end framework that provides a set of pre-designed UI components and styles for building responsive websites. To add Bootstrap to your HTML file, you can follow these steps:
Step 1: Add CDN Links of CSS & JS files in your project
This is the bootstrap 5.3 version CDN link. Add the following code to include the Bootstrap JS & CSS and also jquery js cdn link before the bootstrap js as given below:
< link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel ="stylesheet" />
< script src ="https://code.jquery.com/jquery-3.6.4.min.js" ></ script >
< script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></ script >
Bootstrap requires jQuery, so make sure to include the jQuery library before the Bootstrap JS file
Step 2: Create a HTML file.
create a HTML file named index.html and You can now use the Bootstrap classes to create your website. For example, you can use the following code to create a Navbar:
< nav class ="navbar navbar-expand-lg bg-body-tertiary" >
< div class ="container-fluid" >
< a class ="navbar-brand" href ="#" > Navbar</ a >
< button class ="navbar-toggler" type ="button" data-bs-toggle ="collapse" data-bs-target ="#navbarSupportedContent" aria-controls ="navbarSupportedContent" aria-expanded ="false" aria-label ="Toggle navigation" >
< span class ="navbar-toggler-icon" ></ span >
</ button >
< div class ="collapse navbar-collapse" id ="navbarSupportedContent" >
< ul class ="navbar-nav ms-auto mb-2 mb-lg-0" >
< li class ="nav-item" >
< a class ="nav-link active" aria-current ="page" href ="#" > Home</ a >
</ li >
< li class ="nav-item" >
< a class ="nav-link" href ="#" > Link</ a >
</ li >
< li class ="nav-item dropdown" >
< a class ="nav-link dropdown-toggle" href ="#" role ="button" data-bs-toggle ="dropdown" aria-expanded ="false" >
Dropdown
</ a >
< ul class ="dropdown-menu" >
< li >< a class ="dropdown-item" href ="#" > Action</ a ></ li >
< li >< a class ="dropdown-item" href ="#" > Another action</ a ></ li >
< li >< hr class ="dropdown-divider" ></ li >
< li >< a class ="dropdown-item" href ="#" > Something else here</ a ></ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
Finally, you can test your HTML file by running it in a web browser.
Final Output:
<! DOCTYPE html >
< html lang ="en" >
< head >
< meta charset ="UTF-8" >
< meta http-equiv ="X-UA-Compatible" content ="IE=edge" >
< meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
< title > How to add Bootstrap to HTML</ title >
< link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel ="stylesheet" />
</ head >
< body >
< nav class ="navbar navbar-expand-lg bg-body-tertiary" >
< div class ="container-fluid" >
< a class ="navbar-brand" href ="#" > Navbar</ a >
< button class ="navbar-toggler" type ="button" data-bs-toggle ="collapse" data-bs-target ="#navbarSupportedContent" aria-controls ="navbarSupportedContent" aria-expanded ="false" aria-label ="Toggle navigation" >
< span class ="navbar-toggler-icon" ></ span >
</ button >
< div class ="collapse navbar-collapse" id ="navbarSupportedContent" >
< ul class ="navbar-nav ms-auto mb-2 mb-lg-0" >
< li class ="nav-item" >
< a class ="nav-link active" aria-current ="page" href ="#" > Home</ a >
</ li >
< li class ="nav-item" >
< a class ="nav-link" href ="#" > Link</ a >
</ li >
< li class ="nav-item dropdown" >
< a class ="nav-link dropdown-toggle" href ="#" role ="button" data-bs-toggle ="dropdown" aria-expanded ="false" >
Dropdown
</ a >
< ul class ="dropdown-menu" >
< li >< a class ="dropdown-item" href ="#" > Action</ a ></ li >
< li >< a class ="dropdown-item" href ="#" > Another action</ a ></ li >
< li >< hr class ="dropdown-divider" ></ li >
< li >< a class ="dropdown-item" href ="#" > Something else here</ a ></ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< script src ="https://code.jquery.com/jquery-3.6.4.min.js" ></ script >
< script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></ script >
</ body >
</ html >
