Day 7: Bootstrap 4 Inputs Tutorial and Examples

Hey and welcome to the 7th day of Bootstrap 4 πŸ™ŒπŸΌ Today we will learn about more Bootstrap 4 form elements. We will go through Bootstrap 4 text inputs and custom inputs like checkboxes, radio buttons and select pickers. It is very likely that you will need to use them when building a web project, so it is useful to know their syntax and special Bootstrap 4 classes.

(more…)

Read More

Day 5: Bootstrap 4 Images Tutorial and Examples

Hey and welcome to the 5th day of Bootstrap 4 πŸ€“ Today we will learn about Bootstrap 4 images. Images are an essential part of designing a website. If fitted properly into your design, images will bring your website to life and increase engagement. Beside learning about classes built specifically for images, this is also an opportunity to learn about more Bootstrap 4 utilities: sizing, border radius and shadows.

(more…)

Read More

Day 4: Bootstrap 4 Typography Tutorial and Examples

Welcome to the 4th day of learning Bootstrap 😌 Today we will learn about the Bootstrap 4 typography. It is important to understand and use the typography options well. They will give you the possibility to present the information on your page the best way possible. Typography is one of the most important elements of a design and done properly it will capture the user’s attention, establish information hierarchy and create harmony in the page.

(more…)

Read More

Day 3: Bootstrap 4 Flex Tutorial and Examples

Hey and welcome to the third day of Bootstrap 4 ☺️ Today we will learn about the Bootstrap 4 Flex. Flexbox is a new layout mode in CSS3. It describes ways to align and size elements. Understanding how the Bootstrap 4 flex works will help you align elements horizontally and vertically (to the left, center and right), size them according to their parent and tell them how to fill a row.

Bootstrap 4 has created classes around the CSS3 properties so you can use them with ease. Today we will go through them and create example scenarios. Aligning and sizing elements are crucial parts of front-end development. It is important to get them right before starting with the Bootstrap 4 elements and components. I have personally skipped the flexbox tutorial when I switched to Bootstrap 4. And I found I needed to learn about it very quickly (one the first day I started creating a webpage actually).

(more…)

Read More

Day 2: Bootstrap 4 Grid System Tutorial and Examples

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…)

Read More

Day 1: Bootstrap 4 CDN and Starter Template

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…)

Read More

14 Days of Bootstrap 4 – Introduction

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…)

Read More

a-regatta-on-the-grand-canal

Cool Things of the Week (Web Design Edition #10)

Fun fact in history this week: On the 18th of October, 1697 Giovanni Canaletto was born in Venice. He is an Italian painter and printmaker, best know for his “Regatta on the Grand Canal” painting (which you can see as the featured image for this blog post).

Here are the news and updates for this week, 2018:

  • The highly popular PHP 5.x branch will stop receiving security updates at the end of the year. This meand around 62 percent of all Internet sites will run an unsupported PHP version. You can read more about it here.

(more…)

Read More