Bootstrap Templates, Grid System and Media-queries

|
| By Webner

Bootstrap Templates, Grid System and Media-queries

What is Bootstrap?
Bootstrap is a powerful toolkit. It is a set of HTML, CSS, and JavaScript tools for making and building websites and internet applications. It is a free and open-source project, hosted on GitHub, and originally created by Twitter. The tutorial is split into sections like Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of those sections contains related topics with easy and helpful examples.

Here are some features of Bootstrap :
1. Easy to get started
2. Browser Support
3. Responsive design
4. Mobile-first approach

Basic Bootstrap HTML Template :
A basic Bootstrap HTML template should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap Templates and UI Components :
Bootstrap comes bundled with basic HTML and CSS design templates that include several common UI elements. They contain Typography, Forms, Tables, Buttons, Dropdowns, Buttons and Input teams, Navigation, Glyphicons, Pagination, Alerts, Modals, Tabs, Carousels, and many more.

Bootstrap Grid System
A Bootstrap grid system helps in achieving the responsiveness that can be applied appropriately to scale up to 12 columns according to the size of the device or viewport. Grids give structure to the layout, process the horizontal and vertical tips for composition content and implementation of margins. Grids also offer an intuitive structure for viewers, because it’s easy to follow a left to right, or a right to left flow of content moving down the page. Before grids and before CSS, powerful grid primarily based layouts were achieved by using tables, wherever the content would be organized within table cells. As CSS became mature, a number of CSS frameworks for grid-based layouts started to appear.

Rows were to be placed either in a fixed-width layout wrapper, which has a .container class and a width of 1170px, or in full-width layout wrapper, which has a .container-fluid class, and that allows the responsive behavior in this row.

There are four types of classes used in the Bootstrap grid system: xs for smartphones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for larger desktops (≥1200px). These basically define the sizes at which the columns will collapse or spread horizontally. The class tiers can be used in any combination to get dynamic and flexible layouts.

For example, we should write:

<div class="row">
  <div class="col-md-6">First column</div>
  <div class="col-md-6">Second column</div>
</div>
<div class="row">
  <div class="col-md-3">First column</div>
  <div class="col-md-3">Second column</div>
  <div class="col-md-3">Third column</div>
  <div class="col-md-3">Fourth column</div>
</div>

We can shift columns by using offset. For example, to create a more narrow and centered content:

<div class="row">
  <div class="col-md-6 col-md-offset-3">Centered column</div>
</div>

Media Queries :
Media query is a fancy term for “conditional CSS rule”. It simply applies some CSS, supported sure conditions set forth. If those conditions are met, the style is applied.

Media Queries in Bootstrap permit you to move, show and hide content based on the viewport size. Following media queries square measure used in LESS files to make the key breakpoints within the Bootstrap grid system.

/* Extra small devices (phones, less than 768px) */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bootstrap is an excellent tool for creating layouts, as its responsive CSS is designed to automatically adjust according to different devices. It can be employed to ensure consistency, eliminate cross-browser issues, and so on.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *