https://github.com/chandan-devs-tech/bootstrap-tutorial
https://github.com/chandan-devs-tech/bootstrap-tutorial
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chandan-devs-tech/bootstrap-tutorial
- Owner: Chandan-devs-tech
- Created: 2024-05-26T12:25:14.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-07-02T10:15:39.000Z (almost 2 years ago)
- Last Synced: 2025-02-28T18:46:51.750Z (over 1 year ago)
- Language: HTML
- Size: 817 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bootstrap Overview
Bootstrap is a free and open-source front-end framework renowned for its highly customizable, mobile-first approach and semantic styling. It offers a wide array of UI components and utilities that streamline the development process, making it easier to create responsive and visually appealing web applications.
## Key Features:
- **Responsive Layout**: Built-in styles for creating responsive grid systems ensure consistent design across various screen sizes.
- **Components**: Bootstrap offers a rich set of UI components for common interface elements such as buttons, forms, navigation bars, and more.
- **Typography and Styling**: Typography and image styles help in enhancing the appearance and readability of content.
- **Forms**: Styles for various form elements, including layouts and validations, are available to streamline form design and functionality.
- **Utilities**: A collection of utility classes aids in making minor formatting changes and adjustments.
## Components Breakdown:
### 1. Layout:
- **Containers**: Wrappers for content with a fixed or fluid width.
- **Grid**: System for creating responsive layouts with rows and columns.
- **Columns and Gutters**: Columns to organize content within grid rows.
### 2. Content:
- **Typography**: Styles for text elements, including lead text and text decoration.
- **Images**: Styles for image elements, such as thumbnails.
### 3. Forms:
- **Form Control**: Styles for form inputs, textareas, and select elements.
- **Layout and Validation**: Styles for form layout and validation messages.
### 4. Components:
- **Accordion**: Organizes content within collapsible items.
- **Alerts**: Displays dismissible alert messages.
- **Badge**: Adds additional information to content.
- **Breadcrumbs**: Indicates the current page's location within a navigational hierarchy.
- **Buttons**: Styles for buttons with various options.
- **Button Group**: Groups a series of buttons together.
- **Card**: A flexible content container.
- **Carousel**: A slideshow for cycling through a series of content.
- **Close Buttons**: A generic close button for dismissing content.
- **Collapse**: Shows and hides content.
- **Dropdowns**: A toggleable menu of links or actions.
- **List Groups**: A flexible and powerful component for displaying not only simple lists of elements but complex ones with custom content.
- **Modal**: Adds dialogs for lightboxes, user notifications, or custom content.
- **Navs**: Provides styles for navigation links.
- **Navbars**: Creates responsive navigation headers.
- **Pagination**: Shows pagination to indicate multiple pages.
- **Popovers**: Displays a pop-up box that appears when clicking on an element.
- **Progress**: Displays progress bars to show the user's progress.
- **Scrollspy**: Updates navigation components based on scroll position.
- **Spinners**: Indicate the loading state of a component.
- **Toasts**: Pushes notifications with a lightweight and customizable alert message.
- **Tooltips**: Displays small pop-up boxes when hovering over an element.
### 5. Helpers:
- **Clearfix**: Clears floats to properly contain floated children.
- **Colored Links**: Adds colors to links.
- **Ratio**: Sets aspect ratios for elements.
- **Position**: Sets the position of elements.
- **Visually Hidden**: Hides elements visually but keeps them accessible for screen readers.
- **Stretched Link**: Stretches an inline or floated text link to the full width of its containing block.
- **Text Truncation**: Truncates text with an ellipsis.
### 6. Utilities:
- **Borders**: Adds border styles.
- **Colors**: Sets text and background colors.
- **Display**: Controls the display behavior of elements.
- **Flex**: Sets flexbox-related properties.
- **Float**: Sets float-related properties.
- **Interactions**: Sets interaction-related properties.
- **Overflow**: Sets overflow-related properties.
- **Position**: Sets positioning-related properties.
- **Shadows**: Sets shadow-related properties.
- **Sizing**: Sets size-related properties.
- **Spacing**: Sets margin and padding properties.
- **Text**: Sets text-related properties.
- **Vertical Align**: Sets vertical alignment properties.
- **Visibility**: Sets visibility-related properties.
## Getting Started:
To use Bootstrap, download the compiled CSS and JS files from [getbootstrap.com](https://getbootstrap.com/).
Then, import the `bootstrap.min.css` or `bootstrap.css` and `bootstrap.bundle.min.js` or `bootstrap.bundle.js` files into your project directory.
Link the CSS in the `` of your HTML file:
```html
```
And include the JS files before the closing `` tag:
```
```
Or we can use :
```
```
```
```
## What is SAAS?
Sass is a CSS pre-processor scripting language that adds extra features to CSS and is interpreted or compiled into Cascading Style Sheets (CSS).
Sass files can have either .scss or .sass extensions.
Here are some key features of Sass:
- Variables : Sass allows you to define variables to store colors, fonts, and any other values that you reuse throughout your stylesheet.
- Nestings : You can nest CSS selectors within one another, which helps in writing cleaner and more readable code, especially when dealing with complex CSS structures.
- Mixings : Mixins are reusable blocks of styles that can be included in other selectors. They can also accept arguments, making them versatile for creating variations of styles.
- Imports : Sass allows you to break your CSS code into smaller, modular files called partials, and then import them into one master stylesheet.
- Inheritance (Extend): Sass supports inheritance of styles using @extend, which allows one selector to inherit styles from another selector.
- Operators : Sass supports several operators that allow you to perform operations on values and variables within your stylesheets. These operators include arithmetic, comparison, and logical operators.
- Conditionals : Sass provides conditional statements (@if, @else if, @else) that allow you to apply styles based on conditions.
- Modularity & Reusability : Sass encourages modularity and reusability through several features.
## Install and setup Sass:
```
npm init -y
npm install sass
```
## Compiling Sass :
- We should create a `style.scss` file.
- Next we have to add a script in the package.json file like this :
```
"scripts": {
"sass:build": "sass --no-source-map scss:css",
"sass:watch": "sass --no-source-map --watch scss:css"
}
```
- Next we should run the script name in the console.
```
npm run sass:build
```
## How to use the compiled sass file?
- We just need to link the name of the compiled file at the `head` tag of our `html` file.
## Installing Bootstrap using npm :
```
npm i bootstrap
```
## For changing custom bootstrap styles :
- We need to install bootstrap.
- we need to create a file with .scss extension like bootstrap.scss
- Then we need to import the bootstrap from the node module in our bootstrap.scss file like this:
```
@import '../node_modules/bootstrap/scss/bootstrap.scss'
```
- Then we need to run the script
```
npm run sass:build
```
- After the compilation bootstrap.scss to bootstrap.css we need to link the bootstrap.css file to our html file.
- Then for changing any custom bootstrap style we just need to change the value of the variable in the bootstrap.scss above the import line and recompile our scss file and it will work.
## Install and setup Font Awesome using npm:
- We need to install font awesome using this command :
```
npm i @fortawesome/fontawesome-free
```
- Then we need to create a file with .scss extension like fontawesome.scss and inside this file we need to import these files :
```
@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
@import '../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
```
- Then we need to run our script to compile the scss file to css file.
```
npm run sass:build
```
- Then we should link the compiled file of fontawesome.css to our html file.
- Then we need to copy the node_modules/@fortawesome/fontawesome-free/webfonts to the root directory of our project.