Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=RyTRgQ7k6QE


Duration: 2:51:20
130,063 views
2,658

Learn the Bootstrap CSS framework with this full tutorial. In this intermediate course, you will learn Bootstrap by creating a custom bootstrap theme from scratch using webpack. We'll be making an admin theme.

First, we'll set up npm and webpack so we can configure Bootstrap's source files that are written in SASS. Next, we'll cover the basics of Bootstrap and create some basic Bootstrap templates that are common in admin forms. Finally, we'll customize the theme by writing custom styling and overwriting some of the Bootstrap JavaScript

💻 Code: https://github.com/wilsmex/hq-admin

🎥 Video by Andrew Wilson. Check out his YouTube channel: https://www.youtube.com/channel/UCETveVX7TPauIupxYz6sFtA

⭐️ Course Contents ⭐️
Part 1
⌨️ (2:03) initialize git
⌨️ (2:15) initialize npm
⌨️ (5:06) initialize web pack
⌨️ (6:52) initialize font awesome
⌨️ (7:39) web pack config file
⌨️ (9:04) initialize bootstrap sass and associated required files
⌨️ (15:10) set up project src directory and structure
⌨️ (22:40) configure webpack.config.js
⌨️ (38:50) set up index.html file
⌨️ (52:40) setup our Sass files and import Bootstrap Sass files

Part 2
⌨️ (1:04:33) Bootstrap grid basics
⌨️ (1:11:20) Bootstrap form basics
⌨️ (1:25:00) Bootstrap table basics
⌨️ (1:31:03) Bootstrap card basics
⌨️ (1:38:20) Bootstrap buttons, alerts, dialogs

Part 3
⌨️ (1:41:50) setup our App HTML structure
⌨️ (1:55:03) CSS for navigation header
⌨️ (2:08:35) CSS for sidebar
⌨️ (2:19:35) Override bootstrap defaults
⌨️ (2:26:20) Add responsiveness and sidebar auto-hide
⌨️ (2:39:16) Add mobile toggle via CSS
⌨️ (2:43:45) Add mobile toggle javascript

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://www.freecodecamp.org/news



Other Videos By freeCodeCamp.org


2019-11-26Plan, Code, and Deploy a Startup in 2 Hours [Full Stack JavaScript Tutorial]
2019-11-21Quincy Interviews Open Source Legends The Changelog for their 10 Year Anniversary
2019-11-19Tkinter Course - Create Graphic User Interfaces in Python Tutorial
2019-11-15React Native Browser Editor Part 2 (P8D3) - Live Coding with Jesse
2019-11-12What are JSON Web Tokens? JWT Auth Explained [Tutorial]
2019-11-06Learn Python by Building Five Games - Full Course
2019-10-29Android Development Course - Build Native Apps with Kotlin Tutorial
2019-10-24AWS Certified Cloud Practitioner Training 2020 - Full Course
2019-10-22Pygame Tutorial for Beginners - Python Game Development Course
2019-10-16CSS Tutorial - Zero to Hero (Complete Course)
2019-10-14Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial
2019-10-09Algorithms Course - Graph Theory Tutorial from a Google Engineer
2019-10-07Build 5 Dapps on the Ethereum Blockchain - Beginner Tutorial
2019-10-03Netlify Tutorial - How to build and deploy websites using Netlify
2019-10-01React and APIs - Full Tutorial - Hacker News API Application
2019-09-26TensorFlow 2.0 Crash Course
2019-09-19Data Structures Easy to Advanced Course - Full Tutorial from a Google Engineer
2019-09-18Introduction To Responsive Web Design - HTML & CSS Tutorial
2019-09-09Sass Tutorial for Beginners - CSS With Superpowers
2019-09-06CEO can code? Watch Netlify's CEO code a Sudoku app from scratch in a bar on a Saturday night
2019-09-04How to start a coding YouTube channel (with tips from a bunch of successful creators!)


Tags:
bootstrap
bootstrap tutorial
bootstrap course
bootstrap theme
bootstrap custom theme
css tutorial
css course
bootstrap css
web development