bootstrap_4_modal

Day 14: Bootstrap 4 Modals Tutorial and Examples

Hello and welcome to the 14th day of Bootstrap 4! Today we will learn about Bootstrap 4 Modals. Modals are a simple way to display information upon request. They let you easily add another layer upon your site and give you the possibility to create popups.

In today’s tutorial we will go through ways to position and size the modal. We will see what content we can place inside and how to access its full capabilities via JavaScript. In the end, we have created custom modals that you can build upon for your use-cases.

Let’s get going!

(more…)

Read More

bootstrap_4_cards

Day 13: Bootstrap 4 Cards Tutorial and Examples

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

Read More

Day 8: Bootstrap 4 Forms Tutorial and Examples

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

Read More

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

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