Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Bootstrap 4 By Example
Bootstrap 4 By Example

Bootstrap 4 By Example: Click here to enter text.

eBook
€20.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Bootstrap 4 By Example

Chapter 2. Creating a Solid Scaffolding

In this chapter, you will start learning some new Bootstrap elements and components. By doing this, you will first understand the concepts of the Bootstrap grid system and move on to some basic components. Now, we are going to start the development of a responsive sample landing page. First, we will use the base theme of the framework, and in future, we will apply our own style.

The main structure of this chapter is as follows:

  • The Bootstrap grid system
  • Typography
  • Tables
  • Buttons

Understanding the grid system

The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow us to structure a website in a responsive grid layout.

To exemplify this, imagine an electronic square sheet table that can be divided into many rows and columns, as shown in the following screenshot. In the table, you can create as many lines as you want while merging cells. But what would happen if you wanted to change the layout of a single row? That could be painful.

Understanding the grid system

The Bootstrap grid system works in a different way. By letting you define a set of rows, each one having a set of independent columns, it allows you to build a solid grid system for your web page. Also, each column can have different sizes to perfectly fit your template.

This not being enough, the Bootstrap grid system adapts for every viewport and resolution, which we call responsiveness.

To start learning about the grid system, we will introduce it using the example of a landing page. As you...

Building our scaffolding

For our landing page, we will use the grid presented in the following image. As you can see, it is represented by seven rows, each containing a different number of columns. In this first example, we will use a nonmobile viewport, which we will discuss in the next chapter.

Building our scaffolding

Setting things up

To start that, let's use our default layout presented in Chapter 1, Getting Started. Add inside the div.container tag another div with the .row class:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>

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

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script...

Fluid container

You can easily switch the actual example grid with a fluid full-width layout. To do so, replace the farthest .container with .container-fluid:

<div class="container-fluid">
  …
</div>

We need some style!

Now, we will start using some of the CSS provided for Bootstrap to make our components responsive and more elegant. Our main goal is to make our grid page like what is shown in this screenshot:

We need some style!

Let's break down each row and learn about typography and some other components. We will do this without using a single custom line of CSS!

Getting started with the first row, you may see that this row has a gray background, which is not present in the rest of the layout. To create this, we must make a change in our grid by creating a new .container for this row. So, create another .container and place it inside the first row:

<div class="container">
  <!-- row 1 -->
  <div class="row">
    <header class="col-md-12">
    </header>
  </div>
</div>
<div class="container">
  <!—- the others rows (2 to 7) -->
</div>

Now, to make the gray area, we will use a class in Bootstrap...

Manipulating tables

The Bootstrap framework offers a wide variety for table customization. To present them, we will create a new row before the <footer> and a price table for our landing page, like this:

Manipulating tables

To do this, we must create a regular table with the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags. The table will have three columns and eight rows. Therefore, the HTML code should be like this:

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <table>
      <thead>
        <tr>
          <th>
            <h4>Free plan</h4>
          </th>
          <th>
            <h4>Standard plan</h4>
          </th>
          <th>
            <h4>Premium plan</h4>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h3>$ 0</h3>
  ...

Understanding the grid system


The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow us to structure a website in a responsive grid layout.

To exemplify this, imagine an electronic square sheet table that can be divided into many rows and columns, as shown in the following screenshot. In the table, you can create as many lines as you want while merging cells. But what would happen if you wanted to change the layout of a single row? That could be painful.

The Bootstrap grid system works in a different way. By letting you define a set of rows, each one having a set of independent columns, it allows you to build a solid grid system for your web page. Also, each column can have different sizes to perfectly fit your template.

This not being enough, the Bootstrap grid system adapts for every viewport and resolution, which we call responsiveness.

To start learning about the grid system, we will introduce it using the example of a landing page. As you...

Building our scaffolding


For our landing page, we will use the grid presented in the following image. As you can see, it is represented by seven rows, each containing a different number of columns. In this first example, we will use a nonmobile viewport, which we will discuss in the next chapter.

Setting things up

To start that, let's use our default layout presented in Chapter 1, Getting Started. Add inside the div.container tag another div with the .row class:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>

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

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
...

Fluid container


You can easily switch the actual example grid with a fluid full-width layout. To do so, replace the farthest .container with .container-fluid:

<div class="container-fluid">
  …
</div>
Left arrow icon Right arrow icon

Key benefits

  • • Become an expert in Bootstrap framework, and speed up front-end development and prototyping through real-life examples
  • • An applied guide exploring two web applications such as Twitter and Dashboard from scratch
  • • Hands on the Bootstrap version 4 even before the official release

Description

Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building applications. Before Bootstrap’s release, it was necessary to import a variety of libraries into your project that offered different components and features for web interface development. Plus with the increased popularity of smartphones there were lack of libraries that could handle the responsiveness of a web page. Bootstrap‘s existence let it quickly become famous as a front-end framework that offered a wide set of tools from page grid up to components that render a web page in the best possible way for any device. This book will be a tutorial covering various examples as well as step-by-step methodology to create interesting web applications using Bootstrap and to understand the front-end framework to its core. We begin with an introduction to the Bootstrap framework and setting up an environment to build a simple web page. We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing page sample. You will also learn how to create a web application like Twitter by using the full set of components offered in the framework. Finally, you will learn to create a dashboard web app, using Bootstrap to its finest potential including component customizations, event handling, and external library integration. All these examples are explained step-by-step and in depth, while covering the versions 3 and the most recent version 4 of Bootstrap. So, you will be in the state of the art for front-end development. By the end of this book, you will be familiar with the development of a plugin for the framework and Bootstrap’s world which is popular for fast paced front-end web development, used in countless projects all over the world, and now yours.

Who is this book for?

If you are a frontend developer with no knowledge of Bootstrap, then this book is for you. Basic knowledge of HTML, CSS, and JavaScript is expected, as well as a reasonable understanding of web frameworks, such as jQuery.

What you will learn

  • • Discover how to use Bootstrap's components and elements, and to customize them for your own projects
  • • Understand the framework's usage in the best way with the recommended development patterns
  • • Create web pages for any kind of device like tablet, mobile, computer, etc.
  • • Construct a Twitter app by exploring the advanced bootstrap components like Breadcrumbs, Pagination, Media objects, and so on
  • • Combine the power of JavaScript with your Bootstrap app for more functionality
  • • Create a Dashboard web app using Bootstrap's JavaScript plugins
  • • Learn the difference between Bootstrap's version 3 and 4 of the framework
  • • Extend your knowledge on Bootstrap's external plugins, their incorporation and usage

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Mar 30, 2016
Length: 324 pages
Edition : 1st
Language : English
ISBN-13 : 9781785287053
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Mar 30, 2016
Length: 324 pages
Edition : 1st
Language : English
ISBN-13 : 9781785287053
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 106.97
Bootstrap 4 By Example
€36.99
Mastering Bootstrap 4
€36.99
Learning Bootstrap 4
€32.99
Total 106.97 Stars icon

Table of Contents

12 Chapters
1. Getting Started Chevron down icon Chevron up icon
2. Creating a Solid Scaffolding Chevron down icon Chevron up icon
3. Yes, You Should Go Mobile First Chevron down icon Chevron up icon
4. Applying the Bootstrap Style Chevron down icon Chevron up icon
5. Making It Fancy Chevron down icon Chevron up icon
6. Can You Build a Web App? Chevron down icon Chevron up icon
7. Of Course, You Can Build a Web App! Chevron down icon Chevron up icon
8. Working with JavaScript Chevron down icon Chevron up icon
9. Entering in the Advanced Mode Chevron down icon Chevron up icon
10. Bringing Components to Life Chevron down icon Chevron up icon
11. Making It Your Taste Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
(5 Ratings)
5 star 20%
4 star 0%
3 star 40%
2 star 40%
1 star 0%
Richard Krasowski Apr 11, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Dieses Buch beschreibt Schritt für Schritt alle notwendigen Grundlagen zu bootstrap anhand einer Webapplikation. Der dabei erzeugte Quellcode dient zugleich als Nachweis für die Funktionalität dieser wirklich aktuellen Version.Das Buch ist gut geschrieben, man kann alles verstehen und alles zu Hause nachprogrammieren. Es umschreibt beinahe alle wichtigen Komponenten des frameworks und dient als gutes Nachschlagewerk. Weshalb es mir besonders gefällt, ist die perfekte Ausgewogenheit zwischen Theorie und Praxis. Es wird nicht allzu viel Zeit und Aufwand in die trockene Theorie investiert sondern immer entlang eines praktischen Beispiels das nötige Hintergrundwissen erläutert. Es ist eines der wenigen Bücher, bei denen ich froh war, es geholt zu haben...Wirklich, ein Plus!
Amazon Verified review Amazon
Darius Wiles May 10, 2017
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
I am only part-way through the book, and the technical content is okay. Some of the English is poor and requires re-reading in some cases to make sense of it. For example, "It's much easier to set up but comes with some regards." could be better expressed as "It's easier to set up but has some disadvantages." Such distractions are common and could have been avoided with more thorough proof-reading.The book claims to cover Bootstrap 4, but as it is still under development the book can only make educated guesses about it. It is likely that some of the Bootstrap 4 specific information will be wrong because of changes made in the Bootstrap specification before it is formally released.
Amazon Verified review Amazon
Christian Aschoff Feb 04, 2020
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Das Buch ist prinzipeill gut - aber leider haat sich inzwischen in Bootstrap 4 viel getan. Dadurch sind *viele* CSS-Angaben in den Beispielen falsch und man muß sich die richtigen in der Online-Doku zu Bootstrap heraussuchen.Na ja, die grundlegenden Konzepte sind dennoch gut vermittelt und man lernt durch die Probleme die Online-Doku gut kennen ;-)Schön wäre es, wenn bei den Downloads von Packt-Publishing wenigstens gefixten Code gäbe, ist aber derzeit nicht so.
Amazon Verified review Amazon
Branden L Dec 23, 2016
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
The book's title is "Bootstrap 4 By Example"... then it proceeds to use Bootstrap 3 throughout the book. The author will mention Bootstrap 4's existence in passing here and there, but Bootstrap 4 is not used. In fact, if you use Bootstrap 4, many of the examples will not work. The code you download with the book doesn't even use Bootstrap 4. As an example, take the sample code for Chapter 6. Swap out their Bootstrap 3.3.5 with the latest Bootstrap 4 Alpha version. The page will not work at all.It's unclear to me why the book is titled "Bootstrap 4 By Example" when the author barely uses Bootstrap 4. Very misleading. If you want to learn Bootstrap 3, then this book is great. But if you're looking to get ahead and learn Bootstrap 4, do not use this book.
Amazon Verified review Amazon
Chris Doyle Mar 19, 2020
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
The book does highlight how bootstrap can allow you to easily and quickly create good content and page layout however my progress through the book was slow as i was using the latest version of bootstrap 4 and found that most of the examples didnt wokr as there had been significant change in bootstrap 4 such that a number of classes have been renamed so i spent a lot of time reading on line how to do it now in bootstrap 4. this was very disappointing given the book is titled bootstrap 4 by exmaple.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.