YoVDO

Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial

Offered By: freeCodeCamp

Tags

Bootstrap Courses Computer Science Courses Javascript Courses Sass Courses Webpack Courses HTML Courses Responsive Design Courses

Course Description

Overview

Create a custom Bootstrap admin theme from scratch in this intermediate tutorial. Dive into the Bootstrap CSS framework by setting up npm and webpack to configure Bootstrap's SASS source files. Explore Bootstrap basics and craft common admin form templates. Customize the theme with custom styling and JavaScript modifications. Learn to initialize git, npm, and webpack, set up Font Awesome, configure webpack, structure your project directory, and import Bootstrap SASS files. Master Bootstrap grid, forms, tables, cards, buttons, alerts, and dialogs. Build an app structure with responsive design, including a navigation header, sidebar, and mobile toggle functionality. Gain hands-on experience in overriding Bootstrap defaults and implementing custom CSS and JavaScript for a polished admin interface.

Syllabus

initialize git.
initialize npm.
initialize web pack.
initialize font awesome.
web pack config file.
initialize bootstrap sass and associated required files.
set up project src directory and structure.
configure webpack.config.js.
set up index.html file.
setup our Sass files and import Bootstrap Sass files.
Bootstrap grid basics.
Bootstrap form basics.
Bootstrap table basics.
Bootstrap card basics.
Bootstrap buttons, alerts, dialogs.
setup our App HTML structure.
CSS for navigation header.
CSS for sidebar.
Override bootstrap defaults.
Add responsiveness and sidebar auto-hide.
Add mobile toggle via CSS.
Add mobile toggle javascript.


Taught by

freeCodeCamp.org

Related Courses

Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera
Regression Modeling in Practice
Wesleyan University via Coursera
Diseñando páginas web con Bootstrap 4
Universidad Austral via Coursera
Structured Query Language (SQL) using SAS
SAS via Coursera
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy