Introduction to Bootstrap Framework
The JS Bootstrap framework is a framework that provides tools for web design.
- Bootstrap Grid System
Bootstrap Grid System
The Bootstrap grid system is an implementation of flexbox that can be used with simplified commands: !(display-flex).
The grid is divided into 12 column elements and supports any number of rows. The numbering of the column element determines it’s position in the screen, although this depends on the size of inner elements as well.
The syntax for grid elements is shown below:
<div class="container">
<div class="row">
<div class="col-md-N">CONTENT</div>
</div>
</div>
Bootstrap parses the class attribute and applies only Bootstrap expressions, therefore other pure JS code (style, class names, etc.) can be written within the class attribute.
Possible Bootstrap expressions include the following:
<div class="col-md-N text-ARGS p/m[x/y/t/b/l/r]-N border rounded-ARGS justify-ARGS align-ARGS">CONTENT</div>
Note, this is the intersection between pure CSS and other frameworks: both allow you to apply visual rules to elements in a document, therefore the best one to use is whatever is easier/faster/more legible.
The 12 column element layout is strict, and it’s width depends on the width of the container element.
Therefore, if an individual column is made wider, it may take space from the remaining grid elements.
The left element is 3 wide, right is 8 wide, with a [offset-1] forming the whitespace.
The below document makes use of all the above concepts. CSS is written inline but should ideally be written in it’s own block or imported as a stylesheet.
<body>
<div class="container">
<div class="row">
<div class="com-md-12 p-3">
<h1 class="text-white rounded text-center p-3 title" style="background-color: rgb(127, 197, 174);">Lorem ipsum</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p class="text-white text-center border bg-secondary rounded px-2 py-4">
Menu1<br>
Menu2<br>
Menu3<br>
Menu4
</p>
</div>
<div class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec id augue sodales dui aliquam tempor.
Nunc nec turpis vitae mauris viverra bibendum.
Aenean convallis elit mattis, pulvinar est eget, sollicitudin velit.
Nulla eget purus a augue blandit molestie a sit amet metus.
Sed eu enim bibendum, ullamcorper risus et, lacinia nulla.
Ut vel magna quis felis finibus ullamcorper.
Aliquam sagittis ante eu egestas ultrices.
Aenean luctus lacus a tortor suscipit mattis.
<br><br>
<span style="font-size: 2em">...</span>
</div>
<div class="col-md-2 justify-content-center align-items-center ">
<p class="rounded-pill py-3 text-center" style="background-color: rgb(127, 197, 174);">
Lorem
<br>ipsum.
</p>
<p class="rounded-pill py-3 text-center" style="background-color: rgb(127, 197, 174);">
Dolor
<br>sit amet.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<p class="text-center footer">Aenean luctus lacus a tortor suscipit mattis.</p>
</div>
</div>
</div>
</body>
Result:
Having elements with padding OR margins is possible with 12 full column elements, given the size of the spacing is smaller than the potential overlaps. Additionally, marginY and paddingY, along with height are useful in limiting the height of column elements, as the default is fit-to-parent.
-gonkgonk