Book Image

Learning Bootstrap 4 - Second Edition

By : Matt Lambert
Book Image

Learning Bootstrap 4 - Second Edition

By: Matt Lambert

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.

Related Content you might be interested in

Current Title:

Small book image
Learning Bootstrap 4 - Second Edition
Matt Lambert
Aug, 2016 | 246 pages
No titles found
Table of Contents (15 chapters)
Learning Bootstrap 4 - Second Edition
Learning Bootstrap 4 - Second Edition
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Introducing Bootstrap 4
Introducing Bootstrap 4
Introducing Bootstrap
Summary
2
Using Bootstrap Build Tools
Using Bootstrap Build Tools
Different types of tools
Download the Bootstrap source files
Setting up the blog project
Setting up the JSON files
Creating our first page template
Summary
3
Jumping into Flexbox
Jumping into Flexbox
Flexbox basics and terminology
Ordering your Flexbox
Wrapping your Flexbox
Setting up the Bootstrap Flexbox layout grid
Setting up a Flexbox project
Designing a single blog post
Summary
4
Working with Layouts
Working with Layouts
Working with containers
Inserting rows into your layout
Adding columns to your layout
Choosing a column class
Creating a simple three-column layout
Mixing column classes for different devices
Coding the blog home page
Using responsive utility classes
Summary
5
Working with Content
Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
How to style images
Coding tables
Summary
6
Playing with Components
Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Coding forms in Bootstrap 4
Creating an inline form
Adding validation to inputs
Using the Jumbotron component
Adding the Label component
Using the Alerts component
Using Cards for layout
Updating the Blog index page
How to use the Navs component
Adding Breadcrumbs to a page
Using the Pagination component
How to use the List Group component
Summary
7
Extending Bootstrap with JavaScript Plugins
Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding Tooltips
Avoiding collisions with our components
Using Popover components
Using the Collapse component
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Summary
8
Throwing in Some Sass
Throwing in Some Sass
Learning the basics of Sass
Using Sass in the blog project
Importing partials in Sass
Creating a collection of variables
Customizing components
Writing a theme
Summary
9
Migrating from Version 3
Migrating from Version 3
Browser support
Big changes in version 4
Updating your variables
Additional global changes
Other font updates
Migrating components
Migrating JavaScript
Miscellaneous migration changes
Summary

Designing a single blog post

Let's start by designing the layout and content for a single blog post. At the very least, a blog post should have: a title, post-meta, description, and a read more link. Open up the flexbox.ejs file and replace the first column's code with this new code:

<div class="col-md-4 child"> 
  <h3><a href="#">Blog Post Title</a></h3> 
  <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
  <p><a href="#">Read More</a></p> 
</div>

Let me breakdown what is happening here:

  • I've added an <h3> tag with a link for the post title

  • I've added some post-meta and wrapped it in a <small> tag so it is subtle

  • I've left our description...

Previous Section
End of Section 7
Next Section