Notes - Bootstrap

Bootstrap CSS is the leading CSS framework for developing responsive and mobile-first
websites. This free and open-source toolkit comes with a responsive grid system, global
CSS settings, extensive pre-built components including buttons, navbars, and forms, and
optional JavaScript plugins to speed up the development process.

 Though Bootstrap is an open-source toolkit for developing with HTML, CSS, and
JavaScript, it is often referred to as a CSS framework.
 To understand why, you must first understand that CSS is generally easier to learn for
people at all levels of technical experience and is faster in browsers than JavaScript. For
these reasons, Bootstrap developers wrote in CSS (and HTML) over JavaScript
whenever possible. The CSS library included in Bootstrap is therefore much larger than
the JavaScript library.
 Since Bootstrap makes it easier and faster to create responsive websites, it appeals to
many front-end developers and beginners in particular. However, it’s not recommended
by all. Below we’ll look at why Bootstrap is so popular and when it’s ideal to use — and
when it’s not ideal.

Why Bootstrap?

Bootstrap is the go-to toolkit for many front-end developers. According to W3Techs, it's used by
22.1% of all websites on the internet.

There are a few factors driving Bootstrap’s popularity.

First and foremost, it’s open-source and therefore free to download and use. It’s also fully
customizable, and compatible with all modern browsers. This is true of many CSS frameworks,
however.

What sets Bootstrap apart from other development toolkits is that it was developed mobile-first.
Meaning, the code was optimized for mobile devices (i.e. the smallest screen size) first and then
scaled up to display on larger screens. As a result, building with Bootstrap CSS ensures that your
site supports proper rendering and touch zooming for all devices.

Another reason Bootstrap is so popular is that it’s easy to use. It comes bundled with templates
for typography, forms, buttons, drop-down menus, navigation, and other interface components.
Using these pre-styled templates, you can add features that enrich the user experience on your
site without having to code them from scratch.

When to Use Bootstrap

There are many reasons to use Bootstrap. We’ve discussed some above but let’s take a closer
look at these reasons below.

1. You want a responsive website.

Building a responsive site is much easier using Bootstrap than doing so from scratch. Bootstrap
comes with responsive styles, like containers and media queries, to ensure your site adjusts to the
viewport. That means you don’t have to worry about whether your visitors are using desktops,
tablets, or mobile devices.

2. You want to save time.

You can build your site quickly with Bootstrap. Once you download the framework, you can get
started with a basic template and then add the components you need. These components are
fundamental HTML elements, like tables, forms, buttons, images, and icons, that are styled with
a base class and extended with modifier classes. Using these pre-designed components
significantly limits the amount of custom CSS you have to write.

Consider Bootstrap buttons for example. The base class .btn is used for all the common styles
you want for your buttons, like display, padding, border-width. With this class, you don’t have to
keep repeating these CSS properties in your stylesheet to format every single button you add.

Modifier classes, like .btn-primary on the other hand, are used to add the more specific styles
you want for your buttons, like color, background-color, and border-color of your buttons. This
is just one example of how using Bootstrap components is much faster than coding them from
scratch.

3. You’re familiar with HTML and CSS.

Though Bootstrap does simplify the process of building a site, you’ll have to be familiar with
HTML and CSS to use the framework. For example, understanding the CSS box model will be
important when using the container class and building your first Bootstrap grid.
The good news is you’ll only need a basic knowledge of coding to get started.
4. You have multiple people building out your site.

If you have multiple collaborators working on a site, then consistency is important. You don’t
want buttons on your homepage to look different from buttons on your landing page, or to use a
different website typography on your blog than anywhere else on your site — and so on. Using
Bootstrap and its default settings, utility classes, and component elements can help ensure the
front end of your site looks consistent.
5. You want to be part of a community.

Since Bootstrap is open source, it has a global community of developers and designers dedicated
to supporting the framework. These developers and designers modify and enhance Bootstrap's
codebase on GitHub. They also answer questions on Twitter, Stack Overflow, and in
a dedicated Slack room. When using Bootstrap, you can leverage this active community to
become a better Bootstrap user.
When Not to Use Bootstrap

While there are many benefits of using this CSS framework, there are some reasons not to use
Bootstrap as well. Let’s take a closer look at these reasons below.
1. You want a unique website.

Since Bootstrap comes with pre-styled content, components, and templates, Bootstrap sites tend
to look the same out-of-the-box. In fact, Bootstrap has been blamed for why websites today all
look the same.

You can customize a Bootstrap site, but it’ll take time. Plus, if you have to override too much of
the default styling, then it might make more sense to create your own stylesheet in the first place.

2. You want a theme.

The Bootstrap framework is not a theme — though there are Bootstrap themes available. Let’s
compare the framework to a WordPress theme, for example.
When you install and activate a WordPress theme, it changes your entire site’s appearance.
When you download the Bootstrap framework, aspects of your site’s appearance will change
automatically, like the typography. But you still have to write the HTML and plug in the preset
layouts, colors, and components you need to make up your website.
3. You want a fast-loading site.

Bootstrap can negatively impact the speed of your website. Why? Because it’s heavy — not in
terms of KB, exactly, but in terms of how much the average user doesn’t use.

Bootstrap is less than 500KB. You can also take several steps to reduce that weight and mitigate
its impact on load time. For example, you can use the minified CSS and JavaScript files Or you
only download the CSS files, not the JavaScript ones.

But even with these steps, Bootstrap can still be too heavy for what you need. Most users don’t
need all the components, utilities, and plugins that Bootstrap comes with, so they might be
weighing down your site even if they’re not being used.

4. You don’t have time to learn and read through the Bootstrap documentation.

Bootstrap is considered an easy-to-use platform. It offers extensive documentation for every part
of its framework, from its layout to content to components and more. That means virtually
anyone can learn Bootstrap — it also means it will take time to read through the documentation
and learn the framework. If you are looking to build a website as quickly as possible, then
Bootstrap might not be as ideal as other solutions, like website builders.
5. You want to master HTML and CSS.

Using the pre-designed components and templates that Bootstrap provides makes it much easier
and faster to build a website — but it can also stunt your growth as a coder. Creating with
Bootstrap is like using a calculator to do algebra: you can end up with the result you want
without totally understanding how you got it. That's why it's good to spend time creating your
own custom components, even if you also learn and use Bootstrap.

Now that we understand what Bootstrap CSS is and who should be using it, let’s briefly discuss
the different download options you have.

How to Download Bootstrap CSS

Before we walk through the process of downloading Bootstrap, it’s important to note that you
can load Bootstrap remotely via BootstrapCDN or jsDelivr instead of downloading it. This will
require visitors to have an internet connection to visit your site and will require you to post more
code, however. As a result, downloading Bootstrap is the more popular choice.
There are two different forms of Bootstrap available for download. Each version — a
precompiled and a source code version — appeal to different users depending on whether they
prioritize ease-of-use or flexibility. Let’s take a closer look at each below.
Precompiled Bootstrap

The precompiled version is the most basic form of Bootstrap. You’ll download precompiled CSS
and JS files and minified CSS and JS files that are easy to drop in nearly any web project.

Once downloaded, you’ll unzip the compressed folder and see the following structure.

bootstrap/

├── css/

│ ├── bootstrap-grid.css

│ ├── bootstrap-grid.css.map

│ ├── bootstrap-grid.min.css

│ ├── bootstrap-grid.min.css.map

│ ├── bootstrap-reboot.css

│ ├── bootstrap-reboot.css.map

│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ └── bootstrap.min.css.map

└── js/

├── bootstrap.bundle.js

├── bootstrap.bundle.js.map

├── bootstrap.bundle.min.js

├── bootstrap.bundle.min.js.map

├── bootstrap.js

├── bootstrap.js.map

├── bootstrap.min.js

└── bootstrap.min.js.map

Using the compiled version is easier and faster to use than the source code version — but it’s
more difficult to customize. Any change you want to make to a pre-styled element or layout has
to be applied with an override to the current styles.

If you want to customize the CSS and JS files included in Bootstrap as you please, then you’ll be
better off downloading the source code version.

Bootstrap Source Code

The source code version includes the precompiled CSS, JS, and font assets as well as source files
for the CSS, JS, and icon fonts respectively.

If you choose to download the Bootstrap source code, then you’ll unzip the folder and see the
following structure.

bootstrap/

├── dist/
│ ├── css/

│ └── js/

├── site/

│ └──docs/

│ └── 4.6/

│ └── examples/

├── js/

└── scss/

The dist/ folder contains everything listed in the precompiled section above. The docs/ folder
includes the source code for Bootstrap documentation and examples of Bootstrap usage. The js/
folder contains the source code for Bootstrap JS and the scss/ folder for Bootstrap CSS.

Since this version of Bootstrap requires you to have Autoprefixer and a SASS compiler, the set-
up process is longer and more difficult than setting up the pre-compiled version. Once set up,
however, you can change and customize the files any way you want.

Each version of Bootstrap is ideal for different use cases, but because the precompiled Bootstrap
is simpler and faster to use, we’ll focus on that version for the rest of the post.

How to Create a Website Using Bootstrap

Step 1 : Setup and Overview

In order to use Bootstrap, you first need to integrate it into your development environment, aka
web page. For that, you have two different possibilities: load it remotely or download and use
Bootstrap locally. However, for both, you first need something to load it into.

1. Ceate an HTML Page

As a first step in this tutorial, we will create a simple HTML template as a base where we will
use Bootstrap. For that, the first thing you want to do is create a folder on your computer or
server for the project files. In this case, we will simply call it bootstrap. Here, create a new text
file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then
paste the code below into it.
!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
</body>

</html>

Don’t forget to save your file before moving on.

2a. Load Bootstrap via CDN

As already explained, Bootstrap consists mainly of style sheets and scripts. As such, they can be
loaded in the header and footer of your web page like other assets such as custom fonts. The
framework offers a CDN (content delivery network) access path for that. You can find it on
the Bootstrap download page when you scroll down.

To get Bootstrap into your page, simply paste the code below into the <head> section of your
template.

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">

Be sure to take the actual link from the download page in order to make sure you are using the
latest version of Bootstrap.

When you now save the file, any browser that opens it will automatically load the Bootstrap
assets.

Using the remote method is a good idea as many users will already have the the file in the cache
of their browser from loading other Bootstrap-based websites. If that is the case, they won’t have
to reload it when coming to your site, leading to faster page loading time. As a consequence, this
is the recommended method for live sites.

However, for experimenting and development, or if you want to be independent of an Internet

connection, you can also get your own copy of the files. This is what we’re doing for this
Bootstrap tutorial because it also results in less code we need to post.
2b. Host Bootstrap Locally

An alternative way to set up Bootstrap is to download it to your hard drive and use the files
locally. You find download options in the same place as the links to the remote version. Be sure
to get the compiled CSS and JS files. You don’t need the source files.

Once you have finished downloading it, unzip the file and copy its contents into the same
directory as index.html. After that, you can load the Bootstrap CSS into your project like this:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

You will notice that this includes the file path at which to find the Bootstrap file. In your case,
make sure your path corresponds to your actual setup. For example, the names of the directories
might differ if you downloaded a different version of Bootstrap.

3. Include jQuery

In order to get the full functionality of Bootstrap, you also need to load the jQuery library. Here,
too, you have the possibility to load it remotely or host it locally.

(Quick note: Bootstrap 5, which is currently in Beta status, will stop using jQuery and use plain
JavaScript instead. We will address the upcoming change below. However, for the current
version, Bootstrap 4, you still need jQuery, so this tutorial will include it.)

You find the link to the latest version of the jQuery library here (click on any of the links to get
the remote URL). You can use it to load the library into your page by putting the line of code
below right before where it says </body> on your page.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-

9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Alternatively, download jQuery (right-click > Save Link As…), unzip, and put it into the project
folder. Then, include it in the same place of your file in this way:

<script src="jquery-3.5.1.min.js"></script>

Again, make sure the path corresponds to your location and version of jQuery.

4. Load Bootstrap JavaScript

The last step in setting up Bootstrap is to load the Bootstrap JavaScript library. It’s included in
the downloaded version of the framework and you also find links to remote sources in the same
place as mentioned above. However, we will load it in a different place than the style sheet.
Instead of the header, it goes into the page footer, right after the call for jQuery.
You can call it remotely like this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>

Or locally like so:

<script src="bootstrap/js/bootstrap.min.js"></script>

5. Put it All Together

If you have followed the steps above correctly, you should end up with a file that looks like this
for the remote solution:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Bootstrap Tutorial Sample Page</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">

</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-
9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>

</html>

And here is what you should have for the version that loads all assets locally:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>

<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

If that looks like what’s in your file and you saved your work, you are now ready to move on to
the next step.

Bootstrap Tutorial Step 2: Design Your Landing Page

Alright, that was, admittedly, a lot of preparation work. However, it wasn’t very hard, was it?
Plus, now the fun begins.

At the moment, when you open your sample site in a browser, you should simply see a blank
page. Time to change that. In order to teach you Bootstrap, in this tutorial we will build a landing
page with different elements so we can show you many use cases of the front-end framework.

1. Add a Navigation Bar

The first thing we want to do is add a navigation bar to the top of the page. Doing so allows your
visitors to get around your site and discover the rest of your pages.

For that, we will use the navbar class. This is one of the default elements of Bootstrap, which
you will see a lot of in the course of this tutorial. It creates a navigation bar that is responsive by
default and will automatically collapse on smaller screens. It also offers built-in support for
adding branding, color schemes, spacing, and other components.

You can start by posting this just after the <body> tag:

<nav class="navbar navbar-expand-md">

<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse"
data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
 <ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Some Explanation of the Code

The markup above is probably full of unknown CSS classes. Here is what they mean:

 navbar-expand-md — This denotes at which point the navigation bar expands from vertical or
hamburger icon to a full-size horizontal bar. In this case, we have set it to medium screens,
which, in Bootstrap, is anything greater than 768px.
 navbar-brand — This is used for your website branding. You can also include a logo image file
here.
 navbar-toggler — Denotes the toggle button for the collapsed menu. The piece data-
toggle="collapse" defines that this will turn to a hamburger menu, not to drop-down, which is the
other option. It’s important that you define a data-target with a CSS id (defined by the #) and
wrap a <div> with the same name around the actual navbar element.
 navbar-toggler-icon — As you can probably guess, this creates the icon users click on to open
the menu on smaller screens.
 navbar-nav — The class for the <ul> list element that holds the menu items. The latter are
denoted with nav-item and nav-link.

2. Include Custom CSS

Fortunately, if you want to change the default styling, you don’t have to wade through a large
library of style sheets and make the changes by hand. Instead, just like with a WordPress child
theme, you are able to add your own CSS files which you can use to overwrite existing styling.

For that, simply create a blank file with your text editor and call it main.css. Save it, then add it
to the head section of your Bootstrap site like this:

<link rel="stylesheet" type="text/css" href="main.css">

This is the code for a style sheet that resides in the main directory. If you decide to place your
inside the css folder, be sure to include the correct path in the link.
From here, you are able to add custom CSS to your site. For example, to style the page
background as well as the navigation bar and its elements, you could use markup like this:

body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}

And here is the result:

Looks better than before, doesn’t it?

3. Create a Page Content Container

After the navigation bar, the next thing you want is a container for the page content. This is
really easy in Bootstrap as all you need for it is this underneath the navbar tag:
<header class="page-header header container-fluid">
</header>

Notice the container-fluid class. This is another one of those default Bootstrap classes. Applying
it to the div element automatically applies a bunch of CSS to it.

The -fluid part makes sure the container stretches across the entire width of the screen. There’s
also just container, which is a class that has fixed widths applied to it, so there will always be
space on both sides of the screen.

However, if you now reload the page, you still won’t see anything (unless you use the developer
tools). That’s because you only created an empty HTML element. This will start changing now.

4. Add a Background Image and Custom JavaScript

As the next step in this Bootstrap tutorial, we want to include a full-screen background image for
our landing page header. To that end, we will have to use some jQuery or JavaScript to make the
image stretch all the way across the screen.

You do that the same way you include custom CSS. First, create a text file of the
name main.js and place it inside your site folder. Then, call it before the closing </body> tag
inside index.html.

<script src="main.js"></script>

After that, you can copy and paste this piece of jQuery code to make the <header> element
stretch across the entire screen:

$(document).ready(function(){
$('.header').height($(window).height());
})

However, as mentioned, Bootstrap 5 will no longer come with the jQuery library. Therefore, as
an alternative and to future proof your site, you can achieve the same with plain JavaScript like
so:

var ready = (callback) => {

if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
document.querySelector(".header").style.height = window.innerHeight + "px";
})

Then, the only thing that’s left is to set a background image. You can do this like so
inside main.css:
.header {
background-image: url('images/header-background.jpg');
background-size: cover;
background-position: center;
position: relative;
}

If you place an image of sufficient size at the location specified by the path above, you will
achieve a result similar to this:

5. Add an Overlay

To make the background image extra stylish, we will also add an overlay. For that, create
another div inside the <header> element you just created earlier.

<div class="overlay"></div>

Then, you can add the following in your custom CSS file:

.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
This will create this nice overlay for the image you input earlier:

6. Include a Page Title and Body Text

As a next step, you probably want to add a page title in the form of a heading plus some body
text. That way, your visitors will know immediately which site they are on and what they can
expect from it.

To create those, simply add this snippet inside the container you set up in the last step, below the
overlay:
<div class="description">
<h1>Welcome to the Landing Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam
odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.
Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

After that, add the following markup to main.css.

.description {
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%, -55%);
text-align: center;
}
.description h1 {
color: #6ab446;
}
.description p {
color: #fff;
font-size: 1.3rem;
line-height: 1.5;
}

When you do, the landing page now looks like this:

It’s really starting to come together, isn’t it?

7. Create a CTA Button

No landing page is complete without a call to action, most often in the form of a button. For that
reason, we would be remiss not to include how to create one in this Bootstrap tutorial.

Luckily, the framework offers plenty of tools to create buttons quickly and easily. You can find a
lot of examples here. In our case, we add the following markup right below the page content
inside the <description> container:

<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>

In addition to that, we add this CSS to main.css:

.description button {
border:1px solid #6ab446;
background:#6ab446;
border-radius: 0;
color:#fff;
}
.description button:hover {
border:1px solid #fff;
background:#fff;
color:#000;
}

After saving and reloading, it looks like this:

8. Set Up a Three-Column Section

We can already be quite satisfied with how things are shaping up.
However, we are not done with the page yet. Next up, we want to create
three columns below the main content for additional information. This is
a specialty of Bootstrap since it plays to its strength, creating a grid, and
no tutorial is complete without it. Here’s how to do that in this case:

<div class="container features">

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-1.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor
id sapien rutrum, id vulputate quam iaculis.</p>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">

<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-2.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor
id sapien rutrum, id vulputate quam iaculis.</p>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">

</div>
</div>
</div>

The first thing you will notice is the row element. You need this
whenever creating columns to act as a container for the grid.

As for the columns, they all have several classes: col-lg-4, col-md-4,
and col-sm-12. These denote that we are dealing with columns and the
size they will take on on different screens.

To understand this, you need to know that in a Bootstrap grid, all

columns in one row always add up to the number twelve. So, giving
them the classes above means that they will take up one-third of the
screen on large and medium screens (12/4=3) but the entire screen on
small devices (twelve out of twelve columns).

It makes sense, doesn’t it?

You will also notice that we included images and added the .image-
fluid class to them. This is to make them responsive so that they scale
along with the screen that the page is viewed on.

In addition to that, you can include the following styling in the usual
place:
.features {
margin: 4em auto;
padding: 1em;
position: relative;
}
.feature-title {
color: #333;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.features img {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
margin-bottom: 16px;
}

When added below the main content and saved, it looks like this:

By the way, if you don’t want to manually set the box shadow on your
elements via CSS, you can also assign Bootstrap’s pre-set classes for
that. These are .shadow-sm, .shadow, and .shadow-lg. More
information here.

9. Add a Contact Form

You will notice that one of the new fields is still empty. This was on
purpose because we want to add a contact form to it. This is a very
normal practice for landing pages to allow visitors to get in touch.

Creating a contact form in Bootstrap is quite easy:

 <h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address"
name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send"
name="">

Pay attention to these CSS classes:

 form-group — Used to wrap around form fields for formatting.

 form-control — Denotes form fields such as inputs, text areas, etc.
There is a lot more you can do with forms, which you can find out in
the documentation. However, for demonstration purposes, the above is
enough. Place it inside the remaining empty column and then add this
styling in main.css:

.features .form-control,
.features input {
border-radius: 0;
}
.features .btn {
background-color: #589b37;
border: 1px solid #589b37;
color: #fff;
margin-top: 20px;
}
.features .btn:hover {
background-color: #333;
border: 1px solid #333;
}

When you do, you get a form like this:

 Bootstrap Classes

1. The container class is one of the most important Bootstrap classes. It provides margins,
padding, alignments, and more, to HTML elements.
2. https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
Refer for all classes

Class Description Category

.btn-
Red button. Indicates danger or a negative action Buttons
danger

Button
.btn-group Groups buttons together on a single line
Groups

.btn- Large button group (makes all buttons in a button group larger - Button
group-lg increased font-size and padding) Groups

What are all the Bootstrap 4 grid classes?

The Bootstrap 4 grid system has five classes:
 col- (extra small devices - screen width less than 576px)
 col-sm- (small devices - screen width equal to or greater than 576px)
 col-md- (medium devices - screen width equal to or greater than 768px)
 col-lg- (large devices - screen width equal to or greater than 992px)
 UNIT I INTRODUCTION TO WEB TECHNOLOGIES

CO1: Develop Static and Dynamic website using technologies like HTML, CSS, Bootstrap.

Notes

TLO1: To explore web HTML to develop websites.

 What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

 Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 Example Explained

1. The <!DOCTYPE html> declaration defines that this document is an HTML5

document
2. The <html> element is the root element of an HTML page
3. The <head> element contains meta information about the HTML page
4. The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
5. The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
6. The <h1> element defines a large heading
7. The <p> element defines a paragraph

 What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

1. <tagname>Content goes here...</tagname>

2. The HTML element is everything from the start tag to the end tag:
3. <h1>My First Heading</h1>
4. <p>My first paragraph.</p>
 5. <meta> Element

HTML <meta> element is used to provide structured meta-information about a web

page. It contains a variety of information about the document.

<html>
<head>
<meta charset="UTF-8"/>
<meta name="description" content="HTML meta element"/>
<meta name="keywords" content="html, css, js"/>
<meta name="author" content="way2tutorial"/>
</head>

<meta> tag is used to specify page description, keywords, and other important information.

6. <link> Element

HTML <link> element is used to load an external style sheet into HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!-- Document body -->
</body>
</html>

7. <style> Element

<html>
<head>
<style>
p{
font-size: 15px;
color: red;
}
h2 {
font-weight: normal;
color: #196a8e;
}
</style>
</head>

8. <script> Element

HTML <script> element used to defines client-side JavaScript that is specified within
the document or embedded external JavaScript file through the SRC attribute.

<script type="text/javascript" src="script.js"></script>

  Empty HTML Elements

• HTML elements with no content are called empty elements.

• The <br> tag defines a line break, and is an empty element without a closing tag:

 HTML is Not Case Sensitive

 HTML tags are not case sensitive: <P> means the same as <p>.
 The HTML standard does not require lowercase tags, but W3C recommends lowercase
in HTML, and demands lowercase for stricter document types like XHTML.

 HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

Example

1. <a href="https://www.w3schools.com">Visit W3Schools</a>

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
to:

2. <img src="img_girl.jpg" width="500" height="600">

src attribute specify the URL of the image

width and height attribute specify width and height of image

3. <img src="img_girl.jpg" alt="Girl with a jacket">

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to slow connection, or an error in
the src attribute, or if the user uses a screen reader.

4.<p style="color:red;">This is a red paragraph.</p>

The style attribute is used to add styles to an element, such as color, font, size, and more.
  Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:

 HTML Versions

HTML Version Year

HTML 1.0 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML 5.0 2014

HTML Tables

• HTML tables allow web developers to arrange data into rows and columns.

 Define an HTML Table

A table in HTML consists of table cells inside rows and columns

 1. Table Cells

• Each table cell is defined by a <td> and a </td> tag.

• td stands for table data.

• Everything between <td> and </td> are the content of the table cell.

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

2. Table Rows
Each table row starts with a <tr> and end with a </tr> tag. tr stands for table row.

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table, just make sure that the number of cells
are the same in each row.

3. Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag instead of
the <td> tag:
Example
Let the first row be table headers:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
 <td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Example for <table> tag

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Example for table

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

</style>

<body>

<h2>TH elements define table headers</h2>

<table style="width:80%">
 <tr>

<th>Roll No</th>

<th>Name</th>

<th>Marks</th>

</tr>

<tr>

<td>1</td>

<td>Ajay</td>

<td>61</td>

</tr>

<tr>

<td>2</td>

<td>Raj</td>

<td>64</td>

</tr>

<tr>

<td>3</td>

<td>Rita</td>

<td>65</td>

</tr>

</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>

</html>

Effect as below:
TH elements define table headers
Roll No Name Marks
1 Ajay 61
2 Raj 64
3 Rita 65

To undestand the example better, we have added borders to the table.

 HTML Table Borders

table, th, td {
border: 1px solid black;
}

To add a border, use the CSS border property on table, th, and td elements:

 HTML Table Colgroup

The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

MON TUE WED THU FRI SAT SUN

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

The <colgroup> element should be used as a container for the column specifications.

Each group are specified with a <col> element.

The span attribute specifies how many columns that gets the style.

The style attribute specifies the style to give the columns.

<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
 <th>THU</th>
...

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup Specifies a group of one or more columns in

> a table for formatting

<col> Specifies column properties for each column

within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

 <tfoot> Groups the footer content in a table

FORMS

• There are two basic components of a Web form: the shell, the part that the user fills out,
and the script which processes the information

• HTML tags are used to create the form shell. Using HTML you can create text boxes,
radio buttons, checkboxes, drop-down menus, and more...

Form Example

<form> tag

• A form shell has three important parts:

– the <FORM> tag, which includes the address of the script which will process the
form

– the form elements, like text boxes and radio buttons

– the submit button which triggers the script to send the entered information to the
server

• To create a form shell, type <FORM METHOD=POST ACTION=“script_url”> where

“script_url” is the address of the script
 • Create the form elements

• End with a closing </FORM> tag

Creating Text Boxes

• To create a text box, type <INPUT TYPE=“text” NAME=“name” VALUE=“value”

SIZE=n MAXLENGTH=n>

• The NAME, VALUE, SIZE, and MAXLENGTH attributes are optional

• First Name: <INPUT TYPE="text" NAME="FirstName" VALUE="First Name"

SIZE=20>

• <BR><BR>

• Last Name: <INPUT TYPE="text" NAME="LastName" VALUE="Last Name"

SIZE=20>

• <BR><BR>

Text box control look like this

Text Area

• To create larger text areas, type <TEXTAREA NAME=“name” ROWS=n1 COLS=n2

WRAP> Default Text </TEXTAREA>, where n1 is the height of the text box in rows
and n2 is the width of the text box in characters

Creating Radio Buttons

• To create a radio button, type <INPUT TYPE=“radio” NAME=“name”

VALUE=“data”>Label, where “data” is the text that will be sent to the server if the
button is checked and “Label” is the text that identifies the button to the user .

• Example

<B> Size: </B>

<INPUT TYPE="radio" NAME="Size"

VALUE="Large">Large

<INPUT TYPE="radio" NAME="Size"

VALUE="Medium">Medium

<INPUT TYPE="radio" NAME="Size"

 VALUE="Small">Small

Creating Checkboxes

• To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name”

VALUE=“value”>Label

• If you give a group of radio buttons or checkboxes the same name, the user will only be
able to select one button or box at a time

Example

<B> Color: </B>

<INPUT TYPE="checkbox" NAME="Color"

VALUE="Red">Red

<INPUT TYPE="checkbox" NAME="Color"

VALUE="Navy">Navy

<INPUT TYPE="checkbox" NAME="Color"

VALUE="Black">Black