When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

SkillShare logo

Crash Course on Template Development with Bootstrap 4 Bootcamp

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon1 hours 50 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Crash Course on Template Development with Bootstrap 4 Bootcamp

Introduction

Why should you use Bootstrap 4?

Visual Studio Code

Emmet

How to include Bootstrap to your html template - CDN

Set up your first hello world template with bootstrap

Introduction to bootstrap 4 documentation

Break points

Why is the Grid system important

The Grid System & container

Grid system offset

Basic document layout

Navbar - most important part of website

Slider on Homepage

Add some content to the website

Adding a footer

Introduction to bootstrap theming

What is SASS (scss)

Koala

Install NPM

Install Bootstrap via NPM

Compiling the custom CSS

Changing the default colors

Colors and buttons

Typography

Jumbotron

Forms

Modal

Exercise 1 - building a simple bootstrap product ordering form

Solution - Login page with Bootstrap 4

Solution - Registration page with Bootstrap 4

Solution - Products page with Bootstrap 4

Solution - Products Modal with Bootstrap 4

Basically bye

What You Will Learn?

  • Why should you use Bootstrap 4?.
  • Let's be honest, creating a template is really hard, especially if you need to create a template that works with all the different screen sizes. From desktop browsers to tablets and mobile devices. It can be horrific, but using bootstrap makes life easier..
  • It has Fewer Cross-browser bugs.
  • It’s a consistent framework that supports major of all browsers and CSS compatibility fixes.
  • Lightweight and customizable.
  • Responsive structures and styles.
  • Several JavaScript plugins using the jQuery.
  • Good documentation and community support.
  • Loads of free and professional templates.
  • And my most favourite, it has a great grid system.
  • Through this course, I will show you how to use Bootstrap 4 and you’ll be able to customize it..
  • ____________________________________________________________________________.
  • Why is the Grid System so Important?.
  • The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers..
  • In the next class, I’ll give a quick overview of how the grid system works.
  • _______________________________________________________________________________________________________________________________________________________.
  • SASS or SCSS introduction.
  • In this section, I’m going to explain what SASS is and what will be covered in this section.
  • __________________________________________________________________________________________________________________________________________________.
  • What is SASS or SCSS?.
  • SCSS is basically just an awesome, more dynamic CSSSass stands for Syntactically Awesome Stylesheet.
  • Sass is an extension to CSS.
  • Sass is a CSS pre-processor, it basically means that it takes the scss file and converts it to a normal css file..
  • Sass is completely compatible with all versions of CSS.
  • Sass reduces repetition of CSS and therefore saves time.
  • Sass is free to download and use.
  • Why Use Sass?.
  • Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help..
  • Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
  • Why Use this with Bootstrap?If you want to change the colour scheme in Bootstrap, for instance changing the primary and secondary colors, SASS will be the way to do this easily..
  • Before starting any project online, you first need to do a template for it in HTML and CSS..
  • This part can be really painful, especially if you guys have to make it responsive on every device..
  • Bootstrap 4 makes life easier and more powerful than ever before!.
  • In this course, I will teach you guys how to use bootstrap and how you can use it to your advantage..
  • I will show you how to make a basic website in HTML, and how the theming works in Bootstrap..
  • I will also load more and more content in this course as time goes by..
  • My Name is Gerrit Vermeulen.
  • I’ve been in online development since 2009 and I have been using bootstrap 4 since 2016.
  • Hope you guys enjoy this course..