ELF Tudy Ootstrap

Semester 1, 2020
SELF-STUDY 2 BOOTSTRAP
The learning activities in this self-study (a.k.a PRIOR to Tutorial) are designed to consolidate and extend your
understanding of the topics covered in lectures in week 2.
You should complete all activities and questions until the tutorial in week 3.
BOOTSTRAP
One of the problems with basic HTML design is that the webpage may look different in different browser or
device (such as mobile, laptop or tablet). Therefore, it was required to modify some code according to browser
or device. Bootstrap can resolve this problem easily.
WHAT IS BOOTSTRAP
Bootstrap is a framework which uses HTML, CSS and JavaScript for the web design. All the major browsers e.g.,
FireFox, Chrome, Safari, etc can support Bootstrap. Bootstrap also has several predefined classes for easy layouts
including dropdown button, navigation bar and alerts etc. Using Bootstrap, you can easily build responsive
designs (Responsive web design: creating web sites which automatically adjust and change their layout to look
good on all devices from small phone to large desktops).
WHY USE BOOTSTRAP

1. Extremely popular: Widely used across the different companies and developers
2. Easy to use: anybody with just basic knowledge of HTML and CSS can start using bootstrap. Additionally,
it only requires single file of CSS and single file of JavaScript by removing a tone of codes. There are
predefined classes for format using its lattice framework which are easily adaptable.
3. Highly responsive: Bootstrap offers 12 column grid system, layouts and components so that it conforms
itself relying on device resolutions of their customer. Responsive CSS adjusts automatically to phones,
tablets, and desktops.
4. Browser compatibility: Bootstrap 4 is compatible with all modern browsers.
HOW TO USE BOOTSTRAP

There are two ways using Bootstrap 4 in your webpage by including it from CDN (Content Delivery Network) or
downloading from getbootstrap.com (https://getbootstrap.com/ )
DOWNLOAD BOOTSTRAP
You can download Bootstrap from getbootstrap.com to get the compiled CSS and JavaScript, source code. If you
want to download and host Bootstrap 4, please go to https://getbootstrap.com/docs/4.4/getting-
started/download/ and follow the instructions.
BOOTSTRAP 4 CDN
You can include the CDN file to use Bootstrap 4. In this method, we do not need to download the files, but
provide the links to these files(https://getbootstrap.com/docs/4.4/getting-started/introduction/)
1) Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
1
Semester 1, 2020
2) Place following <script>s near the end of your pages, right before the closing </body> tags, to enable
them.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-

J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
FIGURE 1. STARTER TEMPLATE
CONTAINERS
Containers are the basic layout element in Bootstrap and are required when using the default grid system.
Container classes are used to wrap the page’s contents.
There are three different containers:
• .container – sets a max-width at each responsive breakpoint

• .container-fluid – sets width: 100% at all breakpoints
2
Semester 1, 2020
• .container-{breakpoint} – set width:100% until the specified breakpoint.
.container .container-fluid
Figure 2. part of code - container.html
FIGURE 3. OUTPUT OF CONTAINER.HTML
3
Semester 1, 2020
The table below illustrates how each container’s max-width compares to the original.
Extra small Small Medium Large Extra Large

<576px ≥576px ≥768px ≥ 992px ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%
GRID SYSTEM
Bootstrap 4 divides each row up to 12 columns across the page. The grid system is responsive, and the
columns will re-arrange automatically depending on the screen size.
4
Semester 1, 2020
Following is the basic structure of Bootstrap Grid.
Example of Grid system
5
Semester 1, 2020
Following is an output of above code.
6
Semester 1, 2020
FIGURE 4. OUTPUT OF AN EXAMPLE CODE
TYPOGRAPHY
It creates headings, paragraphs, lists and other inline elements. It specifies how text elements should be
rendered on the web page.
HEADINGS
Bootstrap 4 provides HTML headings from h1 to h6 as below
FIGURE 5. OUTPUT OF HEADINGS.HTML
7
Semester 1, 2020
FIGURE 6. HEADINGS.HTML
DISPLAY HEADINGS
The display headings are used to display the text with large front size and font weight than the normal headings
by using classes of display heading: .display -1, .display -2, .display-3 and .display-4.
FIGURE 7. OUTPUT OF DISPLAYHEADINGS.HTML
8
Semester 1, 2020
FIGURE 8. DISPLAYHEADINGS.HTML
TABLE
Bootstrap 4 has a basic table style with some light padding and horizontal dividers. If you want to use the basic
table style, add the .table class to the <table> element.
FIGURE 9. OUTPUT OF BOOTSTRAP_TABLE.HTML
9
Semester 1, 2020
FIGURE 10. CODE FOR BOOTSTRAP TABLE
For more details about table : https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
BUTTON
Bootstrap 4 provides clickable button to put content such as text and images. You can create button by using
the .btn class flowed by desired style (e.g. btn-success).
Bootstrap provides some options to style buttons as below:
10
Semester 1, 2020
The size of the button also can be set using ‘lg’, ‘md’ and ‘xs’.
NAVIGATION BARS
Navbar provides navigation headers for your application or sites. It can collapse or extend depending on your
screen size.
To create a basic nav bar, add the .navbar class with responsive collapsing class .navbar-expand-xl|lg|md|sm
(provides navbar on extra larg, large, medium or small screen). You also can add links to the navbar by adding
an unordered list with .navbar-nav class.
FIGURE 11. OUTPUT OF NAVBAR.HTML
11
Semester 1, 2020
FIGURE 12. A BASIC NAVBAR CODE
12
Semester 1, 2020
FORM
The form element is used to collect input from users by using field such as text field, checkboxes, or buttons etc.
You can wrap labels and controls in a <div> element with the class .form-group and add another class of .form-
control to all textual <input>, <textarea>, and <select> elements.
FIGURE 13. A BASIC FORM CODE
FIGURE 14. A BASIC FORM OUTPUT
13
Semester 1, 2020
MODAL FORM
Modal from appears in the pop-up window as below.
When you click the button “click me” on the web page, the model-form appears in the pop-up window. The code
of above output is as below.
There are more functions with Bootstrap. For more details :

https://www.w3schools.com/bootstrap4/default.asp
https://getbootstrap.com/docs/4.3/getting-started/introduction/
14
Semester 1, 2020
15

ELF Tudy Ootstrap

Uploaded by

Copyright:

Available Formats

ELF Tudy Ootstrap

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ELF Tudy Ootstrap

Uploaded by

Copyright:

Available Formats

Semester 1, 2020

WHY USE BOOTSTRAP

HOW TO USE BOOTSTRAP

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-

FIGURE 1. STARTER TEMPLATE

There are three different containers:

• .container – sets a max-width at each responsive breakpoint

• .container-{breakpoint} – set width:100% until the specified breakpoint.

Figure 2. part of code - container.html

FIGURE 3. OUTPUT OF CONTAINER.HTML

Extra small Small Medium Large Extra Large

.container 100% 540px 720px 960px 1140px

.container-sm 100% 540px 720px 960px 1140px

.container-md 100% 100% 720px 960px 1140px

.container-lg 100% 100% 100% 960px 1140px

.container-xl 100% 100% 100% 100% 1140px

.container-fluid 100% 100% 100% 100% 100%

Following is the basic structure of Bootstrap Grid.

Example of Grid system

Following is an output of above code.

FIGURE 4. OUTPUT OF AN EXAMPLE CODE

FIGURE 5. OUTPUT OF HEADINGS.HTML

FIGURE 7. OUTPUT OF DISPLAYHEADINGS.HTML

FIGURE 9. OUTPUT OF BOOTSTRAP_TABLE.HTML

FIGURE 10. CODE FOR BOOTSTRAP TABLE

For more details about table : https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Bootstrap provides some options to style buttons as below:

FIGURE 11. OUTPUT OF NAVBAR.HTML

FIGURE 12. A BASIC NAVBAR CODE

FIGURE 13. A BASIC FORM CODE

FIGURE 14. A BASIC FORM OUTPUT

There are more functions with Bootstrap. For more details :

You might also like