Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search 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
  • Feedback & Rating feedback
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

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  1. Log in or register to our website using your e-mail address and password.
  2. Hover the mouse pointer on the SUPPORT tab at the top.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box.
  5. Select the book for which you're looking to download the code files.
  6. Choose from the drop-down menu where you purchased this book from.
  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows
  • Zipeg / iZip / UnRarX for Mac
  • 7-Zip / PeaZip for Linux

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/BootstrapByExample_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.

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 Chapter
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