Working with libraries
By now, you know you write code in your application and that this code interacts with APIs provided by libraries and frameworks.
NOTE
You have to include all the packages and libraries on the web server you deploy the app. That’s why these are called dependencies.
In front-end you do this by referring to them by including them in the HTML file.
Adding CSS bootstrap to HTML:
<html>
<head>
<title>My Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
</body>
</html>Adding JavaScript Bootstrap to HTML(Enhanced functionalities like dropdown and tooltips):
<html>
<head>
<title>My Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>What happens if your dependency also depends on other libraries and frameworks? This is known as a dependency tree. A project could have hundreds of dependencies and its tree, it will take a very long time to download, setup, and configure all of them. How do you make sure you’re using the same versions the rest of your team is using? This is where package managers come in.
Package manager
A package manager is a tool that automatically downloads and installs dependencies. We also refer to dependencies as packages. A package manager also provides the capability to publish your own packages.
For each dependency, you can specify a version of that dependency and the package manager will download it for you.
The most common package manager for front end development is the ==NPM = Node Package Manager==.
Now that all your dependencies are downloaded, you need to include them in your HTML file. But adding all of them into an HTML file would take forever. This is where you will use a bundling tool.
The purpose of a bundler is to automatically combine them into a single file. If you’re bundle is significantly large, many bundles can split your dependencies into multiple bundles.
There are many bundle is available such as Gulp and Webpack.
Introduction to responsive design
Responsive design
Content can shrink or extend depending on the size of the screen being displayed on.
It is complicated by new high resolution screens like the one found on your mobile phone. These screens group multiple physical pixels into one logical pixel to display smoother images and text. These are often used in your favorite smartphones to give more high definition visuals like making text images and rounded edges appear smoother and making the individual pixels less visible.
Responsive design is a set of three practices that allows a website to automatically change its visuals. In other words, to respond based on the device it is displayed on.
- Flexible grids
- Fluid images
- Media queries
Responsive design is a set of three practices that allows a website to automatically change its visuals. In other words, to respond based on the device it is displayed on.
Flexible grids are made up of columns, gutters and margins. The space between the columns is called the gutter and the spaces between the content and the left and right edges of the screen are called margins.
Instead of defining website Element sizes based on pixels, flexible grids are defined in percentage values, allowing them to adjust depending on screen size.
Fluid images by setting the CSS max width property of images to 100%. The images will scale down smaller if they’re containing column becomes narrower than the images size but never grow larger. This enables an image to scale down to fit in a flexibly sized column rather than overflow it but not grow larger and become pixelated if the column becomes wider than the image.
Finally, there are media queries that are part of CSS. They allow developers to query the display size orientation and aspect ratio to conditionally apply CSS rules.
For example, if you wanted your website background to appear blue on a screen size less than or equal to 700 pixels, like on a mobile phone, you could use a media rule to set the background depending on the size of the screen.
@media only screen and (max-width:700px) {
body {
background-color: blue;
}
}Responsive design is the combination of flexible grids, fluid images and media queries. When these elements are used together, you build a website that will automatically adjust its layout based on the device, thus delivering a responsive grid.
In responsive design, the pixel value specified is often referred to as the breakpoint.
Breakpoint
A breakpoint is the point at which a website’s content and layout will adapt to provide the best possible user experience.
A Breakpoint can function in different ways across three different grids: a fixed grid, fluid grids, Hybrid grids
A fixed grid has fixed width columns and flexible margins. The fixed grid has a fixed content width that doesn’t change in a specific breakpoint range while the flexible margins occupy the remaining space on screen.
Then we have fluid or full width grids with fluid width columns and fixed gutters and side margins. The fluid grid has a flexible content with that goes edge to edge as per the screen size. In a fluid grid, columns either grow or shrink to adapt to the available space.
Bootstrap
Bootstrap is often described as a way to “build fast, responsive sites” and it is a “feature-packed, powerful, and extensible frontend toolkit”.
Some people refer to it as a “front-end” framework, and some are trying to be more specific by referring to it as a “CSS framework” or a “CSS library”.
So, what is Bootstrap?
Simply put, Bootstrap is a library of CSS and JavaScript code that you can combine to quickly build visually appealing websites.
Modern web development is all about components. Small pieces of reusable code that allow you to build websites quickly. Bootstrap comes with multiple components for very fast construction of multiple components, or parts of components.
Another important aspect of modern development is responsive grids which allow web pages to adapt their layout and content depending on the device in which they are viewed. Bootstrap comes with a pre-made set of CSS rules for building a responsive grid.
Bootstrap is very popular amongst developers as it saves development time and provides a way for developers to build visually appealing prototypes and websites.
Bootstrap saves significant time because all the CSS code that styles its grid and pre-built components is already written. Instead of having to have a high level of expertise in various CSS concepts, you can just use the existing Bootstrap CSS classes to produce nicely-looking websites. This is indispensable when you need to quickly iterate on website layouts.
Once you know how Bootstrap works, you’ll have enough knowledge to tweak its styling and a whole new world of development opens up to you.
Since Bootstrap is so popular, understanding how to work with it is a prerequisite in many web development companies. Additionally, you can be safe in knowing that both you and your team members have a common design system and you don’t have to spend time deciding how to build one. You are free to jump from team to team, from project to project, even from one company to another, and you don’t need to re-learn “their way of doing things”.
All of these points make investing time to learn Bootstrap a great way to boost your web development skills. In this lesson, you’ll be introduced to the core concepts of Bootstrap and learn how to build web pages using it.
Getting started with Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Little lemon</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col">
<h1>Our menu</h1>
<h2>Falafel</h2>
<p>Chickenpea, herbs and spices.</p>
<img src="falafel.jpeg" class="img-fluid" />
<h2>Pasta Salad</h2>
<p>Lettuce, vegetables and mozzarella.</p>
<img src="salad.jpeg" class="img-fluid"/>
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<td>Falafel</td>
<td>$12.00</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$10.00</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>Using Bootstrap styles
Breakpoints are the triggers in bootstrap for how your layout changes across device or viewpoint sizes.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | < 576px | |
| Small | sm | >= 576px |
| Medium | md | >= 768px |
| Large | lg | >= 992px |
| Extra large | xl | >= 1200pxl |
| Extra extra large | xxl | >= 1400pxl |
Extra small is the default breakpoint in Bootstrap CSS rules, as bootstrap is mobile first. We use the abbreviations for these breakpoints as in fixes in the CSS rules for the grid system. This basically means you have to insert the abbreviation into the CSS class name.
We use the abbreviations for these breakpoints as in fixes in the CSS rules for the grid system.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="alert alert-primary" role="alert">
A Message
</div>
</div>
</div>
</div>
</body>
</html>Bootstrap grid
Building a website using responsive design requires a responsive grid and responsive breakpoints.
For the grid, bootstrap uses a 12 column grid system that can be fluid or fixed. The bootstrap grid system always has a container, rows and columns. The container is the root element of your grid.
Bootstraps grid system always starts with the container. The container contains pads and aligns your content. Its width is determined based on the current responsive breakpoint. You can add rows and inside each row you can add columns.
If I want to make a page show two columns stacked on each other on phone screen, and side by side on desktop, I can do this:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="alert alert-danger" role="alert">
A Message
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
</div>
<div class="col-12 col-lg-6">
</div>
</div>
</div>Bootstrap components
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col">
<h1>Our Menu</h1>
<h2>Fried Calamari <span class="badge bg-primary">New</span></h2>
<p>Squid, buttermilk.</p>
<img src="calamari.jpeg" class="img-fluid" />
<h2>Falafel</h2>
<p>Chickpea, herbs and spices.</p>
<img src="falafel.jpeg" class="img-fluid" />
<h2>Pasta Salad</h2>
<p>Lettuce, vegetables and mozzarella.</p>
<img src="salad.jpeg" class="img-fluid" />
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<th>Food</th>
<th>Price</th>
</tr>
<tr>
<td>Falafel</td>
<td>$10.00</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$12.50</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col">
<h1>Our Menu</h1>
<div class="row">
<div class="col-12 col-lg-6">
<div class="card">
<img src="calamari.jpeg" class="card-img-top" />
<div class="card-body">
<h2 class="card-title">Fried Calamari <span class="badge bg-primary">New</span></h2>
<p class="card-text">Squid, buttermilk.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<img src="falafel.jpeg" class="card-img-top" />
<div class="card-body">
<h2 class="card-title">Falafel</h2>
<p class="card-text">Chickpea, herbs and spices.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<img src="salad.jpeg" class="card-img-top" />
<div class="card-body">
<h2 class="card-title">Pasta Salad</h2>
<p class="card-text">Lettuce, vegetables and mozzarella.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<th>Food</th>
<th>Price</th>
</tr>
<tr>
<td>Fried Calamari</td>
<td>$12.00</td>
</tr>
<tr>
<td>Falafel</td>
<td>$10.00</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$12.50</td>
</tr>
</table>
<div class="alert alert-info" role="alert">
Try our new Calamri!
</div>
</div>
</div>
</div>
</body>
</html>Using Bootstrap documentation
Bootstrap comes with detailed documentation on setting up and using the features available in its library. The documentation is clear and has many code examples to help you get started. In this reading, you’ll explore the frequently used documentation sections. The documentation for Bootstrap is currently available at the following link. https://getbootstrap.com/docs
Navigating the documentation
The sidebar on the webpage allows you to navigate through the different sections of the documentation. There is also a search box if you need to search for a specific piece of information.
Layout
The layout section of the documentation describes how to use the grid system of Bootstrap. This covers what you’ve learned so far and includes more advanced usage such as offsets, column alignment, auto-layout and variable width columns.
Content
The content section of the documentation describes Bootstrap’s default text styling and how to use responsive images and tables. You’ve learned the basics of these earlier on and this section goes into further detail.
Forms
The forms section of the documentation describes how to build forms using Bootstrap’s styles. The library has many CSS rules to improve your form’s user interface and experience. Below are some features you’ll frequently use as a developer:
Form Styling
Bootstrap includes CSS rules to improve the visual style of input elements. For example:
This table outlines the different HTML form elements and which Bootstrap CSS class should be used for them.
| Form Element | CSS class |
|---|---|
| input | form-control |
| input type=“checkbox” | form-check-input |
| input type=“radio” | form-check-input |
| input type=“range” | form-range |
| select | form-select |
| Using these CSS classes will style the elements appropriately for different input types, sizings and states. More information is available on the Forms documentation page. |
Switches
If you’ve used an app on your mobile device, you’re probably familiar with the switch input type.
Bootstrap includes CSS rules to style checkbox input elements as switches. To do this:
- Add the input to a div element.
- On the div element, apply the form-check and form-switch CSS classes.
- On the input element, add the form-check-input CSS class.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox">
</div>More information is available in the Switches section of the documentation.
Input Groups
Input groups are useful for providing additional content to the input field. For example, if you wanted to request the user to input a US dollar amount, you can use an input group to show the dollar symbol and cents amount.
To do this:
- Add the input to a div element.
- Apply the input-group CSS classes on the div element.
- Add a span element before and/or after the input element and apply the input-group-text CSS class to it. The text content is then added inside the span element.
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
<span class="input-group-text">.00</span>
</div>More information is available on the Input Groups documentation page.
Floating Labels
Floating labels help provide form information to the user as part of the input itself. These are different from regular form placeholders. The information stays visible if the user is interacting with the element or if the element has content.
To do this, add the input to a div element. On the div element, apply the form-floating CSS classes.
<div class="form-floating">
<input type="email" class="form-control" id="addressInput" placeholder="Address">
<label for="addressInput">Address</label>
</div>More information is available on the Floating Labels documentation page
Components
As you have learned, Bootstrap comes with many pre-made UI elements and styles to help speed up your development.
Some of these components require JavaScript to work, while others only require CSS classes applied to HTML elements. The Components section of the documentation explains these requirements on each component page and provides many code examples.
Other CSS frameworks and libraries
As a developer, you’ll use many CSS libraries and frameworks throughout your career. As you move on to different projects and as technologies advance, knowing what solutions are available is critical. While Bootstrap is one of the most popular CSS libraries, many others are available, each with different purposes, designs and technical approaches. This reading will introduce you to other popular CSS libraries and frameworks.
Foundation
Official Website Foundation is a framework for building user interfaces similar to Bootstrap. It is used by many large companies such as Pixar, Polar and Sonos. One prominent feature of Foundation is that it can be used to style content for sending via email.
Pure.css
Official Website Pure.css is another library for building user interfaces. While it doesn’t have as many features as Bootstrap, it is designed to be minimal in file size. Smaller file sizes improve loading times for web pages as there is less data to transfer from the web server. If your next project is focused on minimal loading time, this library is worth considering.
Tailwind CSS
Official Website Tailwind CSS is a CSS framework that uses a utility-based approach for its CSS rules. This means that the framework provides many CSS classes with a single purpose. For example, the CSS class pt-6 sets the padding-top CSS property to 6 pixels. This means that you can be precise in applying styling to your HTML without writing CSS. The advantage to this is that it is more flexible for customizing your webpage’s design using the framework. However, the disadvantage is that if multiple developers are working on a project, it could lead to inconsistent design if the team is not strict on its design rules.
UIKit
Official Website UIKit is a lightweight CSS framework featuring a small set of responsive components. Its simple design allows developers to easily customize the style rules and visuals.
MVP.css
Official Website MVP.css is a small CSS library that automatically styles HTML elements without needing to apply CSS classes to them. The library aims to allow a developer to quickly prototype a user interface without worrying about the final design, while still being visually appealing. MVP comes from the technical term Minimal Viable Product, a product with sufficient features to demo to customers or other business stakeholders.
Additional Resources
Bootstrap Official Website
Bootstrap 5 Foundations by Daniel Foreman
https://www.amazon.com/Bootstrap-Foundations-Mr-Daniel-Foreman/dp/B0948GRS8W/
Responsive Web Design with HTML5 and CSS by Ben Frain
https://www.amazon.com/Responsive-Web-Design-HTML5-CSS/dp/1839211563/
Bootstrap Themes
https://themes.getbootstrap.com/
Previous one → 4.CSS Basics | Next one → 6.Introduction to React