Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Adding a carousel to your page


Bootstrap's Carousel component enables you to create a slideshow for cycling through images or slides of text. Of course, you can also add a carousel to your theme.

First you should upload your image to the assets/images/slides directory of your theme. All images should have the same width and height.

As an example, we have added three images into the assets/images/slides directory called slide1.jpg, slide2.jpg and slide3.jpg. These images are released in the CC0 Public Domain and you can find them on Pixabay (https://pixabay.com/).

In the next section, we'll use PHP to create the desired HTML output of our template files. If you are not familiar with PHP yet, the official website can be found at the following URL: http://php.net/. To learn the basics of PHP you can visit Packt's PHP Tech Page at https://www.packtpub.com/tech/php.

Now you can create a new template in the parts directory. You may call it component-carousel.php.

In the component-carousel.php, you...