Please enable JavaScript.

Coggle requires JavaScript to display documents.

Bootstrap Framework - Coggle Diagram

- - - - <blockquote>
        
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit.</p>
        
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem fuga laborum repellat quidem aut, deserunt accusamus voluptatum nesciunt quibusdam quod. Assumenda rem asperiores voluptatibus quos quibusdam? Libero voluptatem modi a officiis ab necessitatibus molestiae atque quis autem, saepe accusantium possimus.</p>
        
        <footer>Lorem ipsum dolor sit amet consectetur.</footer>
      - </blockquote>
  - - - <pre>
        
        Lorem ipsum dolor, sit amet consectetur adipisicing.
        
        display space and line
        
        Lorem ipsum dolor sit amet.
      - </pre>
- - - - <thead>
        
        <tr>
        
        <th>First Name</th>
        
        <th>LastName</th>
        
        <th>Grade</th>
        
        </tr>
    - - <tr>
        
        <td>John</td>
        
        <td>Smith</td>
        
        <td>80</td>
      - </tr>
      - <tr>
        
        <td>Gird</td>
        
        <td>Barnd</td>
        
        <td>60</td>
      - </tr>
      - <tr>
        
        <td>Nupes</td>
        
        <td>Tesmas</td>
        
        <td>80</td>
      - </tr>
- - - - sum of grid column numbers must = 12
    - - 2nd: create 2 column
        
        Column Sizes
        Xs(Extra Small)
        For Phones: sm (Small)
        For Tablets : md ( Medium)
        For Laptops/Desktops: lg - (For larger Desktops)
      - create 3 column
        
        3 column Layouts
        Three column layouts will work on tablets in landscape mode without stacking
        Only if the tablets screen resolution is >> 922px
        
        div class="container-fluid">
        
        <div class="row">
        
        <div class="col-lg-2 bg1">
        
        1 more item...
        
        </div>
        
        <div class="col-lg-8 bg2">
        
        1 more item...
        
        </div>
        
        <div class="col-lg-2 bg1">
        
        1 more item...
        
        </div>
        
        </div>
- - - - <h1>Heading</h1>
      - <p>sub-title</p>