Newest Articles
Building Bootstrap 4 layouts, part 8: Modularize your Bootstrap layouts
Saturday, October 5, 2019
In part 8 of Building Bootstrap layouts tutorial series, we'll learn how to modularize our Bootstrap layouts with the help of Angular. This post will also be a gentle introduction into the very basics of Angular 8. We'll use Stackblitz to help us build a minimal Angular app, and we'll add our Bootstrap 4 layout on top of it.
Building Bootstrap 4 layouts, part 7: Building a typography-focused layout
Friday, October 4, 2019
In this tutorial we'll build a complete Boostrap 4 layout based on the official Bootstrap 4 starter layout. We'll use some free fonts from the Google fonts website to build a typography-focused website layout. We'll also use the Brackets editor so that we can see our changes updated live. We'll copy a custom navbar from a premium Bootstrap theme and learn a bunch of stuff in the process.
Building Bootstrap 4 layouts, part 6: Working with SCSS in Bootstrap 4
Thursday, October 3, 2019
In this tutorial we'll upgrade the Checkout from example from the official getbootstrap website. We'll work with SCSS using th Koala app and Bootstrap 4.3 SCSS files. We'll see how to change default Bootstrap SCSS variables to get a custom layout.
Building Bootstrap 4 layouts, part 5: Improving Bootstrap's official examples
Tuesday, October 1, 2019
Let's upgrade the official Pricing example layout from the official getbootstrap website. We'll copy custom CSS from another Bootstrap layout so that we make a custom, hybrid layout. We'll learn how to copy a Bootstrap 4's theme CSS file, and how to trim the unused CSS using Chrome devtools.
Building Bootstrap 4 layouts, part 4: Improving Bootstrap's official examples
Monday, September 30, 2019
Let's upgrade the official Album example layout from the official getbootstrap website. We'll make it our own by adding transparency to the background color, adding some images, and learning about some Chrome developer tools functionality.
Building Bootstrap 4 layouts, part 3: Bootstrap components
Monday, September 30, 2019
What are components in Boostrap 4? We can divide them into primary and secondary components. We'll use several of these primary components to build a simple and nice-looking layout, with a navbar, a carousel, a heading and some cards. Build a Bootstrap 4 layout quickly in this fun tutorial!
Building Bootstrap 4 layouts, part 2: Rows and responsive columns
Sunday, September 29, 2019
Learn about Bootstrap 4's column grid and build a simple responsive layout in this tutorial. Additionally, understand how the row class works in combination with column classes and how they all fit in container classes in Bootstrap 4.
Building Bootstrap 4 layouts, part 1: Containers and contextual colors
Saturday, September 28, 2019
Learn about Bootstrap containers and about the difference between regular containers and fluid containers. Additionally, we'll cover Bootstrap 4's contextual color classes: primary, secondary, success, danger, warning, info, light and dark. Learn how these are used for backgrounds and text color.
HTML and CSS Basics, part 24: CSS tips and tricks for beginners
Friday, September 27, 2019
This article shows 10 practical tips and tricks in CSS for beginners and junior frontend developers. We cover these topics: centering a div, why not override framework CSS directly, how to make narrow containers in Bootstrap, which HTML element to use to style navigation, what are over-qualified CSS selectors, and more!
HTML and CSS Basics, part 23: CSS grid
Thursday, September 26, 2019
What is the difference between CSS flexbox and CSS grid? How to use the former and the latter? Learn all of this and more in our in-depth introductory article on using CSS grid.
