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 Learning Bootstrap 4
  • Table Of Contents Toc
  • Feedback & Rating feedback
Learning Bootstrap 4

Learning Bootstrap 4 - Second Edition

By : Lambert
3.2 (6)
Buy this Book
close
close
Learning Bootstrap 4

Learning Bootstrap 4

3.2 (6)
By: Lambert
Buy this Book

Overview of this book

Bootstrap, the most popular front-end framework built to design elegant, powerful, and responsive interfaces for professional-level web pages has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make front-end web design even simpler and exciting. In this gentle and comprehensive book, we'll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you'll find out how you can extend your current build with some cool JavaScript Plugins, and throw in some Sass to spice things up and customize your themes. This book will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.
Table of Contents (10 chapters)
close
close
close
Preface
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. Introducing Bootstrap 4
Icon
1. Introducing Bootstrap 4
Icon
Introducing Bootstrap
Icon
Summary
2
2. Using Bootstrap Build Tools
Icon
2. Using Bootstrap Build Tools
Icon
Different types of tools
Icon
Download the Bootstrap source files
Icon
Setting up the blog project
Icon
Setting up the JSON files
Icon
Creating our first page template
Icon
Summary
3
3. Jumping into Flexbox
Icon
3. Jumping into Flexbox
Icon
Flexbox basics and terminology
Icon
Ordering your Flexbox
Icon
Wrapping your Flexbox
Icon
Setting up the Bootstrap Flexbox layout grid
Icon
Setting up a Flexbox project
Icon
Designing a single blog post
Icon
Summary
4
4. Working with Layouts
chevron up
Icon
4. Working with Layouts
Icon
Working with containers
Icon
Inserting rows into your layout
Icon
Adding columns to your layout
Icon
Choosing a column class
Icon
Creating a simple three-column layout
Icon
Mixing column classes for different devices
Icon
Coding the blog home page
Icon
Using responsive utility classes
Icon
Summary
5
5. Working with Content
Icon
5. Working with Content
Icon
Reboot defaults and basics
Icon
Learning to use typography
Icon
Customizing headings
Icon
How to style images
Icon
Coding tables
Icon
Summary
6
6. Playing with Components
Icon
6. Playing with Components
Icon
Using the button component
Icon
Basic button examples
Icon
Creating outlined buttons
Icon
Checkbox and radio buttons
Icon
Coding forms in Bootstrap 4
Icon
Creating an inline form
Icon
Adding validation to inputs
Icon
Using the Jumbotron component
Icon
Adding the Label component
Icon
Using the Alerts component
Icon
Using Cards for layout
Icon
Updating the Blog index page
Icon
How to use the Navs component
Icon
Adding Breadcrumbs to a page
Icon
Using the Pagination component
Icon
How to use the List Group component
Icon
Summary
7
7. Extending Bootstrap with JavaScript Plugins
Icon
7. Extending Bootstrap with JavaScript Plugins
Icon
Coding a Modal dialog
Icon
Coding Tooltips
Icon
Avoiding collisions with our components
Icon
Using Popover components
Icon
Using the Collapse component
Icon
Coding an Accordion with the Collapse component
Icon
Coding a Bootstrap Carousel
Icon
Summary
8
8. Throwing in Some Sass
Icon
8. Throwing in Some Sass
Icon
Learning the basics of Sass
Icon
Using Sass in the blog project
Icon
Importing partials in Sass
Icon
Creating a collection of variables
Icon
Customizing components
Icon
Writing a theme
Icon
Summary
9
9. Migrating from Version 3
Icon
9. Migrating from Version 3
Icon
Browser support
Icon
Big changes in version 4
Icon
Updating your variables
Icon
Additional global changes
Icon
Other font updates
Icon
Migrating components
Icon
Migrating JavaScript
Icon
Miscellaneous migration changes
Icon
Summary

Inserting rows into your layout

The next step in creating a layout is to insert at least a single row of columns. Each container class can have one or more rows nested inside of it. A row defines a collection of horizontal columns that can be broken up to twelve times. The magic number when it comes to columns in Bootstrap is twelve, and you can sub-divide them any way you like. Before we get into columns though, let's review the markup for rows. First let's look at an example of a container with a single row:

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
</div>

As you can see, this is an easy next step in setting up your layout. Like I mentioned, you can have as many rows within a container as you like. Here's how you would code a five-row layout:

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div&gt...
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.
Learning Bootstrap 4
End of Section 4
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
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