Industry Related Frameworks in CSS - Bootstrap

 Industry-Related Frameworks in CSS:- Bootstrap

Bootstrap is the most popular and powerful front-end (HTML, CSS, JS) Framework for developing faster, responsive, and mobile-first website development.

With Bootstrap you can ,

• easily create responsive websites.
• quickly create a multi-column layout with pre-defined classes.
• quickly create different types of form layouts.
• quickly create different variations of navigation bars.
• easily create components like accordions, modals, etc. without writing any JS code.
• we can quickly create different types of alert boxes.
• we can easily create dynamic tabs to manage large amounts of content.
• we can easily create tooltips and popovers to show hint text.

 

Advantages of using Bootstrap

• Save lots of time - We can save time and effort using the Bootstrap predefined design templates and classes.
• Responsive features - Using Bootstrap we can easily create responsive websites that appear more appropriately on different devices such as mobile devices with different screen resolutions.
• Consistent design - All Bootstrap components share the same design templates and styles through a central library, so the design and layout of our web pages will be consistent.
• Easy to use - Bootstrap is very easy to use. Anybody with a basic working knowledge of HTML, CSS, and JavaScript can start development with Bootstrap.
• Compatible with browsers - Bootstrap is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
• Open Source — It is completely free to download and use.

The below simple example shows a usage of Bootstrap.

Bootstrap code in HTML :-

<div class="hero-unit">

2

  <h1>CodePen Bootstrap</h1>

3

  <p>It's pretty easy now. We link it off <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>

4

  <p>

5

    <a class="btn btn-primary btn-large">

6

      Call to Action

7

    </a>

8

  </p>

9

</div>

10

​

11

<div class="page-wrap">

12

​

13

<div class="btn-group">

14

  <button class="btn">Left</button>

15

  <button class="btn">Middle</button>

16

  <button class="btn">Right</button>

17

</div>

18

​

19

<ul class="breadcrumb">

20

  <li><a href="#">Home</a> <span class="divider">/</span></li>

21

  <li><a href="#">Library</a> <span class="divider">/</span></li>

22

  <li class="active">Data</li>

23

</ul>

24

​

25

<div class="pagination">

26

  <ul>

27

    <li><a href="#">Prev</a></li>

28

    <li><a href="#">1</a></li>

29

    <li><a href="#">2</a></li>

30

    <li><a href="#">3</a></li>

31

    <li><a href="#">4</a></li>

32

    <li><a href="#">5</a></li>

33

    <li><a href="#">Next</a></li>

34

  </ul>

35

</div>

36

​

37

<table class="table table-bordered">

38

  <thead>

39

    <tr>

40

      <th>#</th>

41

      <th>First Name</th>

42

      <th>Last Name</th>

43

      <th>Username</th>

44

    </tr>

45

  </thead>

46

  <tbody>

47

    <tr>

48

      <td rowspan="2">1</td>

49

      <td>Mark</td>

50

      <td>Otto</td>

51

      <td>@mdo</td>

52

    </tr>

53

    <tr>

54

      <td>Mark</td>

55

      <td>Otto</td>

56

      <td>@TwBootstrap</td>

57

    </tr>

58

    <tr>

59

      <td>2</td>

60

      <td>Jacob</td>

61

      <td>Thornton</td>

62

      <td>@fat</td>

63

    </tr>

64

    <tr>

65

      <td>3</td>

66

      <td colspan="2">Larry the Bird</td>

67

      <td>@twitter</td>

68

    </tr>

69

  </tbody>

70

</table>

71

72

</div>

CSS Style sheet Code:-

.page-wrap {

2

  padding: 20px 60px;

3

}

4

​

5

.breadcrumb {

6

  margin: 25px 0;

7

}

Output:-

Written by:  W.A. Eranga Dewmini