Be taught Bootstrap by making a custom-made admin theme – Intermediate Tutorial

Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial

Be taught the Bootstrap CSS framework with this full tutorial. On this intermediate course, chances are you’ll analysis Bootstrap by making a custom-made bootstrap theme from scratch utilizing webpack. We’ll be making an admin theme.

First, we’ll put collectively npm and webpack so we’re able to configure Bootstrap’s present info which are written in SASS. Subsequent, we’ll cowl the fundamentals of Bootstrap and create some main Bootstrap templates which are frequent in admin types. Lastly, we’ll customise the theme by writing custom-made styling and overwriting among the many many many many Bootstrap JavaScript

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

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

⭐️ Course Contents ⭐️
Half 1
⌨️ (2:03) initialize git
⌨️ (2:15) initialize npm
⌨️ (5:06) initialize web pack
⌨️ (6:52) initialize font superior
⌨️ (7:39) web pack config file
⌨️ (9:04) initialize bootstrap sass and related required info
⌨️ (15:10) put collectively enterprise src itemizing and enchancment
⌨️ (22:40) configure webpack.config.js
⌨️ (38:50) put collectively index.html file
⌨️ (52:40) setup our Sass info and import Bootstrap Sass info

Half 2
⌨️ (1:04:33) Bootstrap grid fundamentals
⌨️ (1:11:20) Bootstrap kind fundamentals
⌨️ (1:25:00) Bootstrap desk fundamentals
⌨️ (1:31:03) Bootstrap card fundamentals
⌨️ (1:38:20) Bootstrap buttons, alerts, dialogs

Half 3
⌨️ (1:41:50) setup our App HTML enchancment
⌨️ (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 cellular toggle by way of CSS
⌨️ (2:43:45) Add cellular toggle javascript

Be taught to code with out worth and get a developer job: https://www.freecodecamp.org

Be taught a whole lot of articles on programming: https://www.freecodecamp.org/info

And subscribe for mannequin spanking new movies on expertise every single day: https://youtube.com/subscription_center?add_user=freecodecamp