Day 11: Bootstrap 4 Navigation Tutorial and Examples

April 27, 2022May 4, 2022 Cristina Conacel 4 Comments

Day 10: Bootstrap 4 Navbar
Day 12: Bootstrap 4 Lists

Hello and welcome to the 11th day of Bootstrap 4 😎 Today we will learn about the Bootstrap 4 Navigation options. Having to organise a list of links is a very common situation and knowing how to create Bootstrap 4 Navs will help you solve this.

There are multiple options you will be able to choose from: basic navs, nav tabs and nav pills. We will inspect each option and explain how to use it, together with examples. We will also start to see more of the JavaScript options Bootstrap 4 provides. Sounds exciting? Let’s learn to navigate!

(more…)

14 Days of Bootstrap 4 – Introduction

April 11, 2022May 4, 2022 Cristina Conacel 8 Comments

Introduction

This is a Bootstrap 4 Tutorial for beginners. The idea for it comes from “24 days of Rust” and “24 days of Hackage“. As the titles might suggest, this kind of article series features daily blog posts with tutorials on how to use a language or library.

14 Days of Bootstrap 4 consists of daily tutorials focusing on basic parts of Bootstrap 4. Each article has coded examples and extensive descriptions. We also recommend extra resources that you can use to dive deeper.

The purpose is for you to learn something new everyday. At the end of the series you will be a well-prepared Bootstrap 4 developer, ready to create any website that you desire.

(more…)

Day 1: Bootstrap 4 CDN and Starter Template

October 13, 2021October 14, 2021 Cristina Conacel 7 Comments

Introduction Day 2: Bootstrap 4 Grid

Hello and welcome to the first day of the 14 days of Bootstrap 4 series 🙂 Today we will make the first step towards using Bootstrap 4!

In order to see the Bootstrap 4 capabilities and use it, you will need to import the Bootstrap 4 CSS and JS files into your HTML file. In this article you will find how to use the Bootstrap 4 CDN or download your files locally. You might have heard the phrase “how to install Bootstrap 4” before but there really isn’t anything to install. Getting started with Bootstrap 4 will just mean adding links to your page.

(more…)

Day 10: Bootstrap 4 Navbar Tutorial and Examples

October 12, 2021October 14, 2021 Cristina Conacel 13 Comments

Day 9: Bootstrap 4 Tables
Day 11: Bootstrap 4 Navigation

Hey and welcome to the 10th day of Bootstrap 4 💁🏻 Today we will learn about the Bootstrap 4 Navigation Bar. This is an essential part of every page and tricky to create on your own, especially with a different behaviour for mobile. In this article we will see the Bootstrap 4 classes to create a navbar and add elements such as the brand, links, text, images and form. We will also go through options for colouring, placement and responsive behaviour.

(more…)

Day 12: Bootstrap 4 Lists Tutorial and Examples

October 12, 2021May 14, 2022 Cristina Conacel 3 Comments

Day 11: Bootstrap 4 Navigation
Day 13: Bootstrap 4 Cards

Hello and welcome to the 12th day of Bootstrap 4 😉 Today we will learn about Bootstrap 4 lists and Bootstrap 4 list groups. Besides offering multiple styles for the default list, Bootstrap 4 is introducing a new element: the list group. The Bootstrap 4 list group offers extensive use cases and learning how to add them to your project will help you organise your information and navigation.

Let’s start creating lists!

(more…)

Day 2: Bootstrap 4 Grid System Tutorial and Examples

October 12, 2021October 14, 2021 Cristina Conacel 9 Comments

Day 1: Bootstrap 4 CDN
Day 3: Bootstrap 4 Flex

Hello and welcome to the second day of Bootstrap 4 🙋🏻 Today we will learn about the Bootstrap 4 Grid, what it is and how you can use it.

The Bootstrap 4 Grid System is used for responsive layouts. A responsive layout represents the way elements align in the page on different resolutions. It is important you understand how to use the grid before learning about any other Bootstrap 4 component. This is because whatever element you will choose to use, you will need to place it somewhere on the screen. Let’s get started!

(more…)

Day 9: Bootstrap 4 Tables Tutorial and Examples

October 11, 2021October 14, 2021 Cristina Conacel 2 Comments

Day 8: Bootstrap 4 Forms
Day 10: Bootstrap 4 Navbar

Hello and welcome to the 9th day of Bootstrap 4 🙃 Today we will learn about Bootstrap 4 tables. We will see the basic classes for tables, how to colour table headings, rows or cells and how to make them responsive. I have also added a section with examples for adding custom elements and how to get advanced functionalities. I hope these will help you better understand how to use Bootstrap 4 tables in your projects with ease.

(more…)

Day 13: Bootstrap 4 Cards Tutorial and Examples

November 16, 2018February 6, 2020 Cristina Conacel 2 Comments

Day 12: Bootstrap 4 Lists
Day 14: Bootstrap 4 Modals

Hello and welcome to the 13th day of Bootstrap 4! 😄 Today we will learn about Bootstrap 4 cards. A card is a content container that is flexible and easy to extend. Bootstrap 4 cards replace the panels, wells and thumbnails from Bootstrap 3.

Coming with a variety and components and options for styling and aligning, Bootstrap 4 cards offer extensive use-cases. In this blog article we will show how to add components to the cards and style them with utilities. We will also go through options for displaying cards, making use of the grid system, flex utilities, and classes built specifically for cards. We will finish the article with a series of custom cards that you can easily create once you know all of the above. Let’s get started!

(more…)

Day 8: Bootstrap 4 Forms Tutorial and Examples

October 31, 2018February 5, 2020 Cristina Conacel 5 Comments

Day 7: Bootstrap 4 Inputs
Day 9: Bootstrap 4 Tables

Hey! This is the 8th day of Bootstrap 4 💁🏻 Today we will use the elements we have learnt about in the previous 2 days to create Bootstrap 4 forms. We will learn about specific form classes, ways to align inputs in a form and how to validate the data once the users inputs it. Forms make the switch from a static website to a dynamic one, where the content is generated via input. I think it is vital to know how to use forms and important to learn the options you have.

(more…)