Bootstrap is a free collection of tools for building websites and web applications. It contains HTML and CSS-based design templates and components for things like navigation bars, dropdown menus, responsive image galleries. Developed by Twitter, Bootstrap is open source and one of the most popular projects on GitHub. It allows developers to build responsive, mobile-first sites or web applications quickly without having to write CSS code from scratch. Some key advantages of Bootstrap include being easy to use, having a large selection of customizable components and features, extensive documentation, and not requiring developers to write their own CSS.

1. Twitter Bootstrap
Hmidi Hamdi
Software Engineering @ ISSATSo
Jcertif Student Ambassador @JCertif
Member & Founder @ ISSATSo Google Club

2. What is CSS
- Cascading style sheet.
- Managing the look of formatting the page.
2

3. What is JavaScript
- Interpreted programming language.
- Client side.
- Can modify HTML and CSS at runtime.
- Implemented in almost every web browser.
3

4. What is Bootstrap
- Free Collection of tools for website creation.
- Front End Framework.
- Devlopped by Twitter.
- Open Source , Appache Licence.
- Most popular project on Github.
4

5. Why Bootstrap is awesome ?
5

6. Already tried to make your
own website?
6

7. Without bootstrap
7

8. With bootstrap
8

9. Bootstrap Css
9

10. Rows Concept
10

11. Simple Tables
11

12. Adding the table-stripped class
12

13. Other classes
For Tables:
.table-hover : enable a hover state on table rows.
.table-bordered : add borders on all sides of the table and cells.
For Rows :
.active : Applies the hover color to a particular row or cell.
.success : Indicates a successful or positive action.
.info : Indicates a neutral informative change or action.
.warning : Indicates a warning that might need attention.
.danger : Indicates a dangerous or potentially negative action.
13

14. Contextuel colors
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
14

15. Contextuel backgrounds
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p> 15

16. Beautiful Buttons
16
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

17. All Sizes
.btn-lg, .btn-sm, or .btn-xs for additional sizes.
17

18. Bootstrap Components
18

19. Glyphicons
19

20. Drop Down Buttons
<button class="btn btn-default dropdown-toggle"type="button" id="dropdownMenu3" data-toggle="dropdown"
aria-expanded="true">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li ><a tabindex="-1" href="#">Another link</a></li>
</ul>
20

21. Navs
.nav-tabs
.nav-pills
21

22. Combination of everything
22

23. BreadCrumbs
23

24. Easy to use.
Large Pannel of possibilities.
Detailed Documentation.
No need to touch CSS code.
Advantages of using Bootstrap
24

25. Disadvantages
Doesn’t follow best practices.
It’s going to collide my existing set-up.
Heavy.
My new Website looks just like everyone else’s.
25

26. Questions ?
Thank You ! !
26