Scribd
Upload
4 views

Exercise 5_Getting Started With Bootstrap

Uploaded by

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

Exercise 5_Getting Started With Bootstrap

Uploaded by

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

Exercise 5: Bootstrap 5

Objectives and Outcomes

This exercise introduces the first set of steps to set up your web page to make use of
Bootstrap classes and components. By the end of this exercise, you will be able to:

 Download Bootstrap using NPM and include it in your project


 Understand how to set up a web project to use Bootstrap
 Include the Bootstrap CSS and JS classes into a web page

Downloading Bootstrap

 You will use npm to fetch the Bootstrap files for use within your project. Thereafter you
need to install JQuery and Popper.js as shown below since Bootstrap 5 depends on these
two. At the prompt, type the following to fetch Bootstrap files to your project folder:

npm install bootstrap


npm install jquery
npm install popper.js --save
 This will fetch the Bootstrap files and store is in your node_modules folder in a bootstrap
folder. The bootstrap->dist folder contains the precompiled Bootstrap CSS and JS files
for use within your project.
 Open your project folder in your editor, and then open the index.html file in the
conFusion folder. This is your starting web page for the project. We have already created
the web page with some content to get you started. We will use Bootstrap to style this
web page, and learn Bootstrap features, classes and components along the way.
 Start your lite-server by typing npm start at the prompt. The index.html file should now
be loaded into your default browser.

Getting your Web page Bootstrap ready

 Open the index.html file in your favourite text editor. If you are using Visual Studio
Code, Brackets, Sublime Text or similar editors, you can open the project folder in the
editor and then view index.html.
 Insert the following code in the <head> of index.html file before the title.

<meta charset="utf-8">
Page 1
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css
">
 This will include Bootstrap CSS into your web page. Note the subtle change in the fonts
of the content of the web page. This is the Bootstrap typography effect coming into play.
The default Bootstrap typography sets the font to Helvetica Neue and selects the
appropriate font size based on the choice of the heading style and paragraph style for the
content.
 At the bottom of the page, just before the end of the body tag, add the following code to
include the JQuery library, popper.js library and Bootstrap's Javascript plugins. Bootstrap
by default uses the JQuery Javascript library for its Javascript plugins. Hence the need to
include JQuery library in the web page.

<script
src="node_modules/jquery/dist/jquery.slim.min.js"></scr
ipt>
 Now, do a Git commit with the message "Intro. to Bootstrap". You may push the commit
to your online repository.

Exercises

Page 2
1. Create website with bootstrap 5 as image below

2. Create website with bootstrap 5 as image below

Page 3
3. Create website with bootstrap 5 as image below

4. Create website with bootstrap 5 as image below

Page 4
5. Create website with bootstrap 5 as image below

Page 5
Conclusion

Page 6
After learning Bootstrap 5, you should have gained a solid understanding of the framework
and its various components and features.

Page 7

You might also like