Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap 4 By Example
  • Table Of Contents Toc
Bootstrap 4 By Example

Bootstrap 4 By Example

3 (5)
Buy this Book
close
close
Bootstrap 4 By Example

Bootstrap 4 By Example

3 (5)
Buy this Book

Overview of this book

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.
Table of Contents (13 chapters)
close
close
close
Preface
chevron up
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started
Icon
1. Getting Started
Icon
Getting Bootstrap
Icon
Setting up the framework
Icon
Building our first Bootstrap example
Icon
Optionally using the CDN setup
Icon
Community activity
Icon
Bootstrap and web applications
Icon
Browser compatibility
Icon
Summary
2
2. Creating a Solid Scaffolding
Icon
2. Creating a Solid Scaffolding
Icon
Understanding the grid system
Icon
Building our scaffolding
Icon
Fluid container
Icon
We need some style!
Icon
Manipulating tables
Icon
Like a boss!
Icon
Final thoughts
Icon
Summary
3
3. Yes, You Should Go Mobile First
Icon
3. Yes, You Should Go Mobile First
Icon
Making it greater
Icon
Bootstrap and the mobile-first design
Icon
How to debug different viewports at the browser
Icon
Cleaning up the mess
Icon
Creating the landing page for different devices
Icon
Summary
4
4. Applying the Bootstrap Style
Icon
4. Applying the Bootstrap Style
Icon
Changing our grid layout
Icon
Summary
5
5. Making It Fancy
Icon
5. Making It Fancy
Icon
Using Bootstrap icons
Icon
Paying attention to your navigation
Icon
Dropping it down
Icon
Making an input grouping
Icon
Getting ready for flexbox!
Icon
Summary
6
6. Can You Build a Web App?
Icon
6. Can You Build a Web App?
Icon
Understanding web applications
Icon
Adding the navigation
Icon
Do a grid again
Icon
Playing the cards
Icon
Implementing the main content
Icon
Creating breadcrumbs
Icon
Finishing with the right-hand-side content
Icon
Summary
7
7. Of Course, You Can Build a Web App!
Icon
7. Of Course, You Can Build a Web App!
Icon
Alerts in our web app
Icon
Waiting for the progress bar
Icon
Creating a settings page
Icon
Summary
8
8. Working with JavaScript
Icon
8. Working with JavaScript
Icon
Understanding JavaScript plugins
Icon
Awesome Bootstrap modals
Icon
Creating our custom modal
Icon
A tool for your tip
Icon
Pop it all over
Icon
Making the menu affix
Icon
Finishing the web app
Icon
Summary
9
9. Entering in the Advanced Mode
Icon
9. Entering in the Advanced Mode
Icon
The master plan
Icon
The last navigation bar with flexbox
Icon
Filling the main fluid content
Icon
Filling the main content
Icon
Overhead loading
Icon
Fixing the toggle button for mobile
Icon
Summary
10
10. Bringing Components to Life
Icon
10. Bringing Components to Life
Icon
Creating the main cards
Icon
Fixing the mobile viewport
Icon
Learning more advanced plugins
Icon
Summary
11
11. Making It Your Taste
Icon
11. Making It Your Taste
Icon
Customizing a Bootstrap component
Icon
Working with plugin customization
Icon
The additional Bootstrap plugins
Icon
Creating our Bootstrap plugin
Icon
Defining the plugin methods
Icon
Creating additional plugin methods
Icon
Summary
12
Index
Icon
Index

Preface

Frontend development can be separated into two eras, before Bootstrap and after Bootstrap. In 2011, the greatest frontend framework ever was released. Also, in the same year, the adoption and use of the framework grew in great numbers, reaching almost every segment of the market.

The reason of this is as follows: imagine how painful it was to create a simple, nice button, for instance. You had to declare a lot of classes and styles in your code. This was the foresee of Bootstrap, created by some developers from Twitter. The framework was a paradigm change for developing a fast-paced web page frontend.

The greatness of Bootstrap lies in three aspects. The first is the style sheet, which contains some basic CSS for almost every HTML element in a uniform and beauty way.

The second aspect is the components. They can be reused by just copying and pasting code. The last aspect is the JavaScript plugin, which includes some very common additional elements that cannot be found elsewhere.

Take a deep dive into the Bootstrap frontend framework with the help of examples that will illustrate the usage of each element and component in a proper way. By seeing examples, you will get a better understanding of what is happening and where you want to reach.

During the book, along the examples, you will be able to nail the framework and develop some very common examples using Bootstrap. These are a landing page, a web application, and a dashboard, which is desired by 10 out 10 web developers. You will face these kind of page countless number of times during your life as a developer, and you will do that using Bootstrap at its finest, including component customizations, animations, event handling, and external library integration.

We will start from the basics of the framework, but we will not hesitate from going further to really nail the framework. If you complete the book's examples by yourself, we can guarantee that you will become a true Bootstrap master.

This book is the first one to offer support for version 4 of Bootstrap. However, we will offer support for version 3 as well. So, you will be ready for whatever comes your way.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap 4 By Example
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon