Packt+ | Advance your knowledge in tech

0

All Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Bootstrap 4 Cookbook

You're reading from Bootstrap 4 Cookbook Solutions to common problems faced in Responsive Web Design

Product type Paperback

Published in Jun 2017

Publisher Packt

ISBN-13 9781785889295

Length 338 pages

Edition 1st Edition

Languages

JavaScript

Tools

Bootstrap

Concepts

Design

Author (1):

Imsirovic

View More author details

Table of Contents (19) Chapters

Title Page

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Preface

1. Installing Bootstrap 4 and Comparing Its Versions FREE CHAPTER

2. Layout Like a Boss with the Grid System

3. Power Up with the Media Object, Text, Images, and Tables

4. Diving Deep into Bootstrap 4 Components

5. Menus and Navigations

6. Extending Bootstrap 4

7. Make Your Own jQuery Plugins in Bootstrap 4

8. Bootstrap 4 Flexbox and Layouts

9. Workflow Boosters

10. Creating a Blog with Jekyll and Bootstrap 4

11. Bootstrap 4 with ASP.NET Core

12. Integrating Bootstrap 4 with React and Angular

Making Jekyll work with Bootstrap 4

In this recipe, we will start making a static blog-aware system in Jekyll. Specifically, we will set up its basic structure and make it work with Bootstrap 4 Sass files, which will be compiled into CSS. We will also look at how to override Bootstrap's Sass variables with Jekyll.

Getting ready

This recipe will show you how to create a simple layout in Bootstrap 4 using Jekyll. The recipe deals with the whole setup, that is, creation of folders, running commands via console, and adding partial files in Jekyll. Thus, this recipe deals with a lot of other tasks than just working with Bootstrap 4. The result of this recipe is a working Jekyll blog, running on Bootstrap 4 and Sass.

Before we begin, we need to install Bootstrap 4 (via Bower), as well as having Ruby and Jekyll installed on our machine.

To install Bootstrap, we'll simply run the following command inside our chapter10/start folder:

bower install bootstrap#v4.0.0-alpha.6

To check if you have Ruby and...

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at £13.99/month. Cancel anytime

Authors (1)

Imsirovic

Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.

See other products by Imsirovic

Other recommended products

Related to this chapter

Hands-on Full Stack Development with Angular 5 and Firebase

Hands-on Full Stack Development with Angular 5 and Firebase

Real-time applications have dominated the field of web applications for years. Real-time isn't limited to only displaying data as soon as it's available. It shows its real power when used with interactive experiences in which users and systems can instantly communicate with one another. The leading social platforms like Facebook and Twitter are all built upon real-time web technologies. This book will help you build your Angular skills by realizing potential of Firebase with Angular to create real-time web applications. In this book we will be building an end to end social networking web application from development to production with Angular as front end and Firebase as back end.

Feb 2018 8h 32m

Learning Bootstrap 4 by Building Projects

Learning Bootstrap 4 by Building Projects

Bootstrap is the world's most popular frontend framework to build web applications. You will be using a template that will help you in building different kinds of real world websites such as a social media website, a company landing page, a media hosting website, and a profile page with ease.

Aug 2018 7h 16m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Vue.js Quick Start Guide

Vue.js Quick Start Guide

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily.

Oct 2018 6h 12m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

This book will help you gain practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel back end. You will learn the most important technical facets of developing with Angular and Laravel, and demonstrates how to put those skills into practice.

Jul 2018 14h 0m

Web Development with Angular and Bootstrap

Web Development with Angular and Bootstrap

Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications. If you're ready to progress your web development skills past HTML and CSS, this book will give you everything you need to build your own web app.

Aug 2019 16h 24m

Hands-On Server-Side Web Development with Swift

Hands-On Server-Side Web Development with Swift

This book is about building professional web applications and web services using Swift and leveraging two popular Swift web frameworks: Vapor 3.0 and Kitura 2.5. By the end of the book, you would be able to successfully create your own web application by leveraging the powerful ecosystem of Swift.

Nov 2018 13h 28m

Vue.js 2 and Bootstrap 4 Web Development

Vue.js 2 and Bootstrap 4 Web Development

Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. When you combine Bootstrap with Vue.js, it provides quicker ways to create responsive web applications. This book teaches you to add dynamic functionality to your web applications by combining Bootstrap with Vue.js. In this book, we will combine Bootstrap with Vue.js to form a complete front-end stack and build highly reactive and responsive applications.

Sep 2017 10h 20m

Practical Web Design

Practical Web Design

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. This book offers you everything you need to know for building your websites.

Apr 2018 12h 16m

Rich Finelli trains you in the fine points of CSS and the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich Finelli in this book! So, here Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and for using flexbox.

Oct 2017 17h 24m

Elm Web Development

Elm Web Development

Web development with JavaScript usually involves dealing with performance and maintenance issues. JavaScript fatigue makes it difficult for many developers to keep up with the increasing complexity posed by the multitude of JavaScript frameworks with changing versions, the need to use different tools such as task runners, module bundlers, compilers, testing suites, linting and debuggers. Elm is an easy to learn, functional programming language that simplifies web development by eliminating complexity associated with using JavaScript for web development. Elm is a statically typed language and thus makes a front end web developer's life easier by preventing any run-time errors.

Mar 2018 9h 36m

Personalised recommendations for you

Based on your interests and search pattern

ASP.NET Core 9 Web API Cookbook

ASP.NET Core 9 Web API Cookbook

Get ready for the future of web API development by working through practical recipes covering REST, GraphQL, SignalR, and gRPC. This book is ideal for .NET developers eager to learn best practices in API security, data access optimization, and more.

Apr 2025 11h 28m

Spring System Design in Practice

Spring System Design in Practice

This book guides you through the intricacies of building robust software architectures with Spring. You'll get hands-on with the tools and best practices needed to design scalable, secure, and high-performance applications.

May 2025 15h 4m

Learn React Hooks

Learn React Hooks

This ultimate guide to Hooks shows you how to manage state, handle form submissions, fetch data using Suspense, and build reusable custom Hooks. This edition includes the latest Hooks and introduces modern React 19 features with real-world use cases.

May 2025 12h 24m