5/2/24, 20:30 about:blank
Hands-on Lab: Getting Started with Bootstrap
Estimated time needed: 30 minutes
This lab provides you with two exercises.
In the first exercise, you will download the precompiled Bootstrap files, set up Bootstrap for a project, and create a simple HTML file with two button
Bootstrap components. Finally, you will verify that the Bootstrap elements are rendering properly in the browser.
In the second exercise, you will use the CDN via jsDelivr to set up Bootstrap for the project and create an app to send questions to customer support and
lookup help on technical documentation. You will also customize the elements. Finally, you will test the app to ensure it renders properly.
Learning Objectives
After completing this lab, you will be able to:
Download Bootstrap files
Set up Bootstrap
Test the Bootstrap set up
Create a form with different Bootstrap elements
Test the project output
Prerequisites
Familiarity with HTML, CSS, and JavaScript
Exercise 1: Download and set up Bootstrap in a project
There are two main methods to download Bootstrap files:
Source files if you prefer to have more control over the customization and build process.
Pre-compiled files if you want a quicker setup with ready-to-use files.
For this exercise, you will download the precompiled version of Bootstrap. You will follow the different steps in the process.
Task 1: Download Bootstrap
1. Launch to the official Bootstrap website.
2. On the Bootstrap Home page, navigate to the Downloads section.
3. Then, click the Download button in the Compiled CSS and JS section.
about:blank 1/7
5/2/24, 20:30 about:blank
4. The downloaded file will have a name in the format bootstrap-x.x.x-dist.zip, where x.x.x represents the Bootstrap version. An example of a version number is
5.3.1.
Task 2: Set up Bootstrap in your project
1. Create the front-end project folder with the css and js subfolders.
2. Extract the files to a folder of your preference.
Result: After extracting the files, you should see a folder structure in the format bootstrap-x.x.x-dist folder (where x.x.x represents the version number)
containing the css and js, folders.
3. Next, you will need to add Bootstrap css to the project. Navigate to the css, where you will find several css files available as part of the pre-compiled package.
4. Copy the bootstrap.min.css file.
5. Navigate to the project folder's css folder and paste the bootstrap.min.css file.
6. You will also need to add Bootstrap js to the project. Navigate to the js folder in the bootstrap-x.x.x-dist folder (where x.x.x represents the version number).
7. Copy bootstrap.min.js and bootstrap.bundle.min.js.
8. Navigate to the project folder's js folder and paste the bootstrap.min.js and bootstrap.bundle.min.js files.
Result: The folder structure should now contain the css and js files in the respective folders.
Task 3: Verify the Bootstrap setup
To verify the setup, you need to make sure that the output of an HTML file containing a Bootstrap element renders properly.
1. Create a simple HTML file named bootstrap_test.html.
2. Add the <link> tag to include the path to the bootstrap.min.css file.
1. 1
2. 2
1. <!-- Example <link> tag with the path -->
2. <link rel="stylesheet" href="css/bootstrap.min.css">
Copied!
3. Add <script> tags to include bootstrap.min.js and bootstrap.bundle.min.js.
1. 1
2. 2
3. 3
1. <!-- Example <script> tag with the path -->
2. <script src="js/bootstrap.min.js"></script>
3. <script src="js/bootstrap.bundle.min.js"></script>
Copied!
4. Include the <!DOCTYPE html>, <html>, and <body> tags along with some basic HTML code.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
1. <!-- Example HTML code -->
about:blank 2/7
5/2/24, 20:30 about:blank
2.
3. <!DOCTYPE html>
4. <html>
5. <body>
6.
7. <h1>Testing Bootstrap</h1>
8. <p>Verifying bootstrap functionality</p>
9.
10. </body>
11. </html>
Copied!
5. Add a Bootstrap element, such as a button before the </body> tag. For example, add <button type="button" class="btn btn-success">Success</button> and
<button type="button" class="btn btn-warning">Warning</button>.
Note: You can also add elements from the Components section on the official Bootstrap website.
6. Save the file.
7. Open the Bootstrap_test.html file in a browser.
8. Did the file render properly?
Click here for how for validation pointers
Congratulations! You have successfully set up the precompiled version of Bootstrap for your project.
Exercise 2: Set up Bootstrap via CDN and create a form using Bootstrap components
In this exercise, you will use the CDN via jsDelivr to set up Bootstrap in a project and create a basic form using Bootstrap elements, such as navigation bar, labels,
input boxes, dropdowns, and buttons.
Task 1: Set up Bootstrap for the project
1. Create a new project folder named Customer_Support_form. Create a file named customer_form.html.
about:blank 3/7
5/2/24, 20:30 about:blank
2. Add the <!doctype html>, <html>, and <head> tags.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
1. <!doctype html>
2. <html>
3. <head>
4.
5.
6. </head>
7. </html>
Copied!
3. In the customer_form.html file, add the CDN link. To do this:
1. Navigate to the Download page in the official Bootstrap website.
2. Search for the CDN via jsDelivr section.
3. Copy the CSS and JavaScript links. Here is an extract that you can use for the purposes of this exercise.
1. 1
2. 2
1. <link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVN
2. <script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqV
Copied!
4. Paste the links in the customer_form.html file between the <head> and </head> tags.
Task 2: Create and customize the navbar for the app with Bootstrap components
1. Add the navbar component from the Bootstrap website to your code within the <body> </body> tag. You will find this code in the navbar topic under the
Components section.
Click here for an example from the website
Here is an example code taken from the official Bootstrap site for the navbar component, which you can use in the exercise.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
1. <nav class="navbar navbar-expand-lg bg-body-tertiary">
2. <div class="container-fluid">
3. <a class="navbar-brand" href="#">Navbar</a>
4. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSu
5. <span class="navbar-toggler-icon"></span>
6. </button>
7. <div class="collapse navbar-collapse" id="navbarSupportedContent">
8. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
9. <li class="nav-item">
10. <a class="nav-link active" aria-current="page" href="#">Home</a>
11. </li>
12. <li class="nav-item">
13. <a class="nav-link" href="#">Link</a>
14. </li>
15. <li class="nav-item dropdown">
16. <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
17. Dropdown
18. </a>
19. <ul class="dropdown-menu">
20. <li><a class="dropdown-item" href="#">Action</a></li>
21. <li><a class="dropdown-item" href="#">Another action</a></li>
22. <li><hr class="dropdown-divider"></li>
23. <li><a class="dropdown-item" href="#">Something else here</a></li>
about:blank 4/7
5/2/24, 20:30 about:blank
24. </ul>
25. </li>
26. <li class="nav-item">
27. <a class="nav-link disabled" aria-disabled="true">Disabled</a>
28. </li>
29. </ul>
30. <form class="d-flex" role="search">
31. <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
32. <button class="btn btn-outline-success" type="submit">Search</button>
33. </form>
34. </div>
35. </div>
36. </nav>
Copied!
2. Customize the navbar to have the following:
Change the label named Link to About Us.
Change the label named Dropdown to Help
Retain only two items in the dropdown list.
Change the label for the first dropdown item to Technical documentation.
Change the label for the second dropdown item to Talk to us.
Remove or comment the <li> tag containing the label named Disabled.
Change the button property for the Search button to Info.
Click here for a hint
Task 3: Create and customize the form for the app with Bootstrap components
1. Add the form component from the Bootstrap website to your code within the <body> </body> tag. You will find the code in the Overview topic of the Form
section.
Here is an example code taken from the official Bootstrap site for the form component, which you can use in the exercise.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
1. <form>
2. <div class="mb-3">
3. <label for="exampleInputEmail1" class="form-label">Email address</label>
4. <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
5. <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
6. </div>
7. <div class="mb-3">
8. <label for="exampleInputPassword1" class="form-label">Password</label>
9. <input type="password" class="form-control" id="exampleInputPassword1">
10. </div>
11. <div class="mb-3 form-check">
12. <input type="checkbox" class="form-check-input" id="exampleCheck1">
13. <label class="form-check-label" for="exampleCheck1">Check me out</label>
14. </div>
15. <button type="submit" class="btn btn-primary">Submit</button>
16. </form>
Copied!
2. Customize the form to have the following:
Add a new label with a title Full name written in bold before the Email address field using the <label> tag.
1. 1
1. <label for="name" class="form-label"><b>Full name</b></label>
Copied!
Add a new input type tag of type text to enter a name. Keep the width of the text box at 500px.
1. 1
1. <input type="text" class="form-control" id="name" style="width: 500px;"></p>
Copied!
Make the label named Email address to appear in bold using the <b></b> tags.
1. 1
1. <label for="exampleInputEmail1" class="form-label"><b>Email address</b></label></p>
Copied!
Change the width of the input box for Email address to 500px using the style attribute in the input type tag.
1. 1
1. <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" style="width: 500px;">
Copied!
Add style="width: 500px;" in the input type tag for Email Address as displayed in the code.
1. 1
about:blank 5/7
5/2/24, 20:30 about:blank
1. <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" style="width: 500px;">
Copied!
Add a label named Reason for contacting us: similar to the code used for Full name.
Add a dropdown Bootstrap component from the official Bootstrap website. You can find the dropdown component in the Dropdown topic of the
Components section. For this example, we will use the code available for split danger button.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
1. <div class="dropdown">
2. <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
3. Dropdown button
4. </button>
5. <ul class="dropdown-menu">
6. <li><a class="dropdown-item" href="#">Action</a></li>
7. <li><a class="dropdown-item" href="#">Another action</a></li>
8. <li><a class="dropdown-item" href="#">Something else here</a></li>
9. </ul>
10. </div>
Copied!
This code will add the dropdown button below the Reason for contacting us: label.
Move the dropdown next to the label and allow the selected option to be visible at the top of the dropdown button. To do this, replace the code from
<div> to </div> for the dropdown with the following code that uses the <select> tag and <option> tag. Also, the titles for each option have been changed
to options relevant to the form including Billing, Technical Support, and Complaints and Feedback.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
1. <select id="cars" class="btn btn-secondary dropdown-toggle" style="background-color: rgb(255, 255, 255);color: black; text-align: cen
2. <option value="billing" selected style=" text-align: left;">Billing</option>
3. <option value="techsupport" style=" text-align: left;">Technical Support</option>
4. <option value="feedback" style=" text-align: left;">Complaints and Feedback</option>
5. </select>
6.
7. <ul class="dropdown-menu">
8. <li><a class="dropdown-item" href="#">Billing</a></li>
9. <li><a class="dropdown-item" href="#">Technical Support</a></li>
10. <li><a class="dropdown-item" href="#">Complaints and Feedback</a></li>
11. </ul>
Copied!
To enable a user to add their comments, provide them with a text area. You can add the following code after the dropdown code and before the code for
the Submit button.
1. 1
2. 2
3. 3
1. <div class="mb-3">
2. <textarea name="message" id="message" cols="65" rows="10" style="resize: none;"></textarea>
3. </div></p>
Copied!
Add a button to RESET the form using the button type="reset" tag from the official Bootstrap website.
1. 1
1. <button type="reset" class="btn btn-secondary">RESET</button>
Copied!
3. Make sure to save the file.
Task 4: Test the app
1. Launch the customer_form.html file.
2. A form should display with all the fields and buttons. You should also be able to add details to the form.
3. Notice that the fields are too close to the left margin. You can append the style attribute to the <div class="mb-3"> tag as style="margin: 30px;".
4. After updating and saving the file, you should see a margin to the left of the labels and input boxes.
Congratulations! You have successfully created an app using Bootstrap components and customized the components based on your requirements.
Author(s)
Rama
about:blank 6/7
5/2/24, 20:30 about:blank
Changelog
Date Version Changed by Change Description
2023-09-01 0.1 Rama Initial version created
2023-09-07 0.2 Steve Hord QA pass with edits
© IBM Corporation 2023. All rights reserved.
about:blank 7/7
