Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/learnwithfair/bootstrap-documentation

bootstrap-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
https://github.com/learnwithfair/bootstrap-documentation

bootstrap bootstrap4 bootstrap5 learn-with-fair learnwithfair rahatul-rabbi rahatulrabbi web-development

Last synced: 20 days ago
JSON representation

bootstrap-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]

Host: GitHub
URL: https://github.com/learnwithfair/bootstrap-documentation
Owner: learnwithfair
Created: 2024-04-29T17:05:44.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-04-29T19:14:35.000Z (7 months ago)
Last Synced: 2024-10-09T10:45:30.189Z (about 1 month ago)
Topics: bootstrap, bootstrap4, bootstrap5, learn-with-fair, learnwithfair, rahatul-rabbi, rahatulrabbi, web-development
Language: HTML
Homepage:
Size: 180 KB
Stars: 1
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## BOOTSTRAP-5 DOCUMENTATION

Thanks for visiting my GitHub account!

**Bootstrap** is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components [more](https://www.w3schools.com/bootstrap/bootstrap_get_started.asp) Or, [Click](https://getbootstrap.com/)

Or, [Click](https://github.com/learnwithfair/web-development-api/tree/main/HTML%2BCSS%2BJS/bootstrap-html)

## Source Code (Download)
[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)

## Required Software (Download)

- VS Code, Download ->https://code.visualstudio.com/download

### Prerequisites

- HTML
- CSS

## How to use Bootstrap?

+ Initialize in the Header Section For Bootstrap

```

```
+ Initialize in the Header Section For Icon

```

```

+ Initialize in the Footer Section For Bootstrap
```

```

### BS4 vs BS5

- support IE 10 and 11
- more colors added in bootstrap 5
- card-deck class is not supported anymore
- jumbotron not supported in bs5
- jQuery is removed and vanila js has taken place in bs5
- bootstrap 5 has own SVG icons
- form elements such as buttons, checkboxes used to look - different based on OS and browser now it remains same
- breakpoints: now 6 break-points xs, sm, md, lg, xl, xxl

### [0. welcome to Bootstrap4 and 5](https://youtu.be/Wl6Q472fNCc)

### [1. Introduction to Bootstrap](https://youtu.be/SzaWRb-Mm_M)

#### 1.1 What is Bootstrap?

- Most powerful and popular Front end framework.

#### 1.2 Why Bootstrap?

- It includes HTML, CSS based design for buttons, navigation etc.
- Easier web development
- create navbar, alert boxes, different layout so easily
- Create responsive web page easily
- save time
- open source

### [2. Create a bootstrap webpage](https://youtu.be/B7z7_LOCvrs)

- create a basic html file with 6 heading tags
- How to add bootstrap to your project?
- add css cdn to the head of html file : ` `
- add js cdn inside the body: ` `

### [3. Containers and grid](https://youtu.be/JVGWXp5uw7o)

- breakpoints: xs < 576px | sm >=576px | md >=768px | lg >=992 | xl >=1200px | xxl >=1400px
- .container: for x-small it will take 100%; but for other breakpoints it will take maximum not full width of viewport
- .container-fluid
- .container-{breakpoint}; example- .container-md
- example

```html

Rahatul Rabbi

Born To Teach.

About Me

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta,
repudiandae laboriosam? Odit repudiandae beatae eius modi sapiente eveniet
exercitationem illum.

```

- built with flexbox layout
- .row
- .col, .col-{breakpoints}; breakpoints are: xs, sm, md, lg, xl, xxl
- responsive grid
- example:
````html

My Services

Web development

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Web development

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Web development

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

```html
````

### [4. bootstrap 4 vs bootstrap5](https://youtu.be/dMU3R1dWqo4)

### [5. colors and spacing - Margin, padding](https://youtu.be/OpxU0T_Pa4w)

- colors: primary(blue), success(green), info(light blue), warning(orange), danger(red), secondary(grey), white, dark, light
- bg-colorName
- text-colorName
- p-0 (no padding), p-1(0.25rem), p-2(0.5rem), p-3(1rem), p-4(1.5rem) to p-5
- pl-value; pr-value, pt-value; pb-value; px-value; py-value;
- responsive padding: p-3, p-lg-5
- use m for margin

### [6. border and image](https://youtu.be/oPlPz2gf5OY)

- border, border-colorName, rounded-left, rounded-circle
- responsive image: img-fluid
- thumbnail image: img-thumbnail
- aligning-image: float start, float-end
- centering image: mx-auto d-block or make the parent div text-center

### [7. Text and font](https://youtu.be/AbhMm6TYNKg)

- text-left, text-right, text-center, text-justify
- responsive text-alignment: text-sm-left text-md-center
- text-lowercase, text-uppercase, text-capitalize
- text-decoration-none

### [8. dismissible alert](https://youtu.be/jJnr3kvxmgU)

- example
```html

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, fuga!

```

### [9. blockquote and abbreviations](https://youtu.be/GggXq0Dh-Jc)

- example

```html

```

### [10. button, button group, list group](https://youtu.be/rU9glyS3J6o)

- btn, btn-link, btn-group
- btn-colorName; example: btn-primary, btn-light
- btn-outline-colorName
- button modifiers: btn-lg, btn-sm, btn-block, btn-group-lg, disabled
- example

```html

```

### [11. collapse and pagination](https://youtu.be/pKrfwnZ2Rxk)

- example

```html

learn more

learn more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolorem sed
quisquam repudiandae sequi voluptatibus, aperiam aliquam adipisci nam
maiores quia unde necessitatibus veritatis eligendi in laboriosam, officia
porro? Explicabo.

```

### [12. Navigation menu](https://youtu.be/ZbAvtMpEzcA)

- example

```html

Home

Tutorial

Gallery

Contact

```

### [13. Toggleable dynamic tab and pill](https://youtu.be/VWxSH4zjF8c)

### [14. Navbar](https://youtu.be/Exq0vXXe3DM)

### [15. Card](https://youtu.be/hXNglSpEv5Q)

- example

```html

Card Title

card text is here. add your description

visit the link

```

### [16. Media objects](https://youtu.be/cqEvL_kIbTE)

### [17. Table](https://youtu.be/74Ge1I0FzBk)

- we can use table-colorName on table, tr, td
- Use .table-striped to add zebra-striping to any table row within the .
- example

```html

My Education

Qualification
Institution
Passing Year
Grade

SSC
SingerKatch High School and College
2006
3.44 / 5.00

HSC
SingerKatch High School and College
2008

BSc in CSE
Leading University
2017
3.92 / 4.00

```

### [18. Form ](https://youtu.be/eDE7TndaKeM)

- form controls create block level and allows us to style input and textarea with custom sizing, designing and more.
- sizing: form-control, form-control-lg, form-control-sm

- example

```html

Contact

fullname:

email:

We'll never share your email with anyone else.

password:

Must be 8-20 characters long.

Color picker

CSE
EEE
LLB

Accept terms and conditions

male

female

Email address

Comments

Submit

```

### [19. Carousel](https://youtu.be/f6nCsa6Zbjg)

### [20. Badge, progress and tooltip](https://youtu.be/D-rPnaM0agw)

- example

```html

Bootstrap5 video New

Notifications 4

75%

```

### [21. List group]()

- example

```html

An item

A second link item

A fourth item

And a fifth one

Books
10

Pens
5

```

### [22. float and svg icons](https://youtu.be/-BP8r0vMOXU)

- bootstrap svg icons - https://icons.getbootstrap.com/
- example

```html

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
architecto, totam harum eaque commodi dignissimos alias veniam tenetur
maxime, sapiente nisi facere ipsa saepe inventore.

Alarm

```

### [23. position and display](https://youtu.be/qknEBRJBAM0)

- example

```html

click me

```

### [24. flex]()

- example

```html