Scribd
Upload
17 views

bootstrap1

This document outlines a hands-on lab for getting started with Bootstrap, consisting of two exercises that guide users through downloading Bootstrap files, setting it up in a project, and creating a simple HTML file with Bootstrap components. The lab also covers using a CDN to set up Bootstrap and creating a customer support form with various Bootstrap elements. Participants are expected to have familiarity with HTML, CSS, and JavaScript to complete the exercises successfully.

Uploaded by

conanbar4
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
17 views

bootstrap1

This document outlines a hands-on lab for getting started with Bootstrap, consisting of two exercises that guide users through downloading Bootstrap files, setting it up in a project, and creating a simple HTML file with Bootstrap components. The lab also covers using a CDN to set up Bootstrap and creating a customer support form with various Bootstrap elements. Participants are expected to have familiarity with HTML, CSS, and JavaScript to complete the exercises successfully.

Uploaded by

conanbar4
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/ 7

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

You might also like