Bootstrap CSS Framework

By May 12, 2017

Description:

Bootstrap CSS Framework

Preferencesoft

In this article, we will see how to use Bootstrap version 4 which has somewhat changed compared to the previous version. We will give some examples of using the grid system.

Bootstrap is a HTML, CSS, and JavaScript framework to develop Web pages. It supports all popular browsers and adapts Web pages to any type of screen (Desktops, Tablets and mobile).

It is under a free license (MIT license) and can be used freely in applications and Web sites. It is often used to create web applications and easily fits into the CMS and blogs.

The new version v4 of Bootstrap is still in beta, but we will use this latest version.

Usefulness of Bootstrap

When developing a Web application, you must create the application logic, but also format the look of the application. Generally, pages must be consistent and conform to a style director.  For the presentation, we often conceive CSS styles sheets by following a certain theme.

But it can be laborious if you want to create stylish buttons, menus, grids, a carousel etc. For some items such as menus, you should eventually write code in JavaScript to handle certain events.

To avoid redoing everything from crash and save time, one can use a CSS, HTML, JavaScript Framework like Bootstrap.

Often these frameworks offer at least responsive grids, buttons and inputs. But Bootstrap turns out be one of the most complete and currently the most used framework. You can also find many themes designed to Bootstrap and ready to use on the Web. This explains why Bootstrap is also used to create simple Web sites.

Disadvantages of Frameworks

If you use a framework without customize it, your web pages will not have the touch of originality that will attract visitors and keep them a little longer.

If you use the full version of a framework in each page, you may alter the performance of the site and make it inaccessible from mobiles.

If you customize the framework by overloading CSS classes, you will add style sheets and slow down the loading of pages.

After having chosen a framework and worked with, it will be difficult to change. Otherwise, you must readjust your work to the new framework, which will inevitably lead to a waste of time.

Installation Bootstrap

Currently, you can download Bootstrap version 3.3.7 on the website http://getbootstrap.com/ and the 4.0.0 version is in preparation on github.

To install Bootstrap in an HTML page, simply place Bootstrap in the right directories of your project and insert the following code in the head of the page:

<head>
       <meta charset="utf-8">
       <title>My Title</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Bootstrap -->
      <link rel="stylesheet" type="text/css" href="Styles/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="Styles/custom.css">
</head>

and add the code at the end:

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all plugins -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

In Visual studio, in the case of a .NET MVC application Bootstrap is installed by default. Otherwise you can always install it with NuGet packages and you add references to Bootstrap yourself in .cshtml or .aspx pages.

Differences between version 4 and the previous ones

Bootstrap version 4 replaces px unit with rem unit. Rem means relative to font size of the root element (often inherited from the browser or defined as an attribute of the <html> tag).  The rem/em proportional system makes all objects of a page auto-adjustable.

The grid system is now a 5-tier grid system (xs, sm, md, lg, xl). A new screen width (xl) has been added for wide screens.

The CSS classes .xm-col-* disappear and are replaced by .col-*. Also note a difference in the media query behavior between the .col- and .xs-col- classes.

The .img-responsive class is replaced by .img-fluid class.

Less is abandoned and Sass replaces it.

 

Customization

*      By overriding CSS classes
It's the simplest and most widely used method. We create a .css file in which we partially redefine some CSS classes with new attributes.
For example, create the *custom.css* file:


.btn {
     background-color:yellow;
}

and put it in the directory Styles of your project, then you insert the following meta tag into your HTML (.cshtml or .aspx) page:
<head>
       <meta charset="utf-8">
       <title>Title</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Bootstrap -->
       <link href=" Styles/bootstrap.min.css" rel="stylesheet">
       <link href="Styles/custom.css" rel="stylesheet">
</head><a name="_Hlk483265427">

Finally, add a button in the body:

<body>
   <button  type="button"  class="btn">Hello</button>
</body>

We obtain:



*      By using Sass
We need to get the Bootstrap source and if you work with VS 2017 put it in the root directory of your project. Install the NuGet Web Essentials to easily compile the .scss files. In the file Bootstrap.scss, place comment slashes in front of the @import files that will not serve us (for example, in front of @import dropdown). Let's keep at least the imports of Core variables and mixins and Core CSS. You can change a few colors in the file _variables. scss. Help you with the Bootstrap documentation to learn about the essential classes and variables. All that remains is to compile it by right-clicking on Bootstrap.scss. We get two files Bootstrap.css and Bootstrap.min.css (minimized). Use the latter preferably and place it in your project styles directory.

Bootstrap Grid System

If we want to have 6 images in a grid of 2 lines and 3 columns, we can use a HTML table.  But there will be problems posting on small devices. Indeed, if the images have a fixed width then the array may be too large to display in full. If the images do not have their width imposed (with a height of 100%) and the table has a width of 100% then the whole can be reduced and become too small.

It is best to use the bootstrap grid system that aligns objects by row and re-arrange the objects in each row depending on the screen size.

First a grid must be created in a container class Block:

<div class = "container"> </div>

then we declare a row as follows:

<div class = "row"> </row></code>

and columns are placed inside the last block.

The page is divided into 12 columns of equal width.

To create columns, we place div blocks side by side and to indicate the number of columns occupied by a block, the following classes are used: col-1, col-2, ..., col-12

Note: in col-<n>, <n> does not represent a column number, but the number of columns occupied by the block.

Let's see an example:

<div class="container">
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
   </div>
</div>
1
1
1
1
1
1
1
1
1
1
1
1

Let's group the first four columns into one:

<div class="container">
    <div class="row">
        <div class="col-4">4</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
    </div>
</div>
4
1
1
1
1
1
1
1
1

 

But in this way, we encounter the same problems as with the tables because the columns stay on the same line regardless of the width of the screen.

To better control grid behavior on different widths, Bootstrap makes available other classes:

  • *      col-* (extra small for phones)

  • *      col-sm-* (small for tablets)

  • *      col-md-* (medium for laptops)

  • *      col-lg-* (large for laptops/desktops)

(* stands for a number of columns between 1 and 12)

You can specify the number of columns occupied by each block for each screen type.


Breakpoints

Extra small devices xs (≥ 0px)

Small devices sm (≥576px)

Medium devices md (≥768px)

Large devices lg (≥992px)

Extra large devices xl (≥1200px)


Class prefix

.col-*

.sm-col-*

.md-col-*

.lg-col-*

.xl-col-*


Scope of Applicability

Applies to all screen widths and automatically carries forward the number of column to sm, md, lg and xl.

Applies to this screen width and automatically carries forward the number of column to md, lg and xl. Overwrites the number of columns imposed by col-.

Applies to this screen width and automatically carries forward the number of column to lg and xl. Overwrites the number of columns imposed by col-.or sm-col-.

Applies to this screen width and automatically carries forward the number of column to xl. Overwrites the number of columns imposed by col-, sm-col- or md-col-.

Applies to only this screen width. Overwrites the number of columns imposed by col-,. sm-col-, md-col- or lg-col.

 

This can get quite tedious to specify the number of columns for each screen width, but if you set the number of columns for a given screen width (xs, sm, or md) then this number will apply to larger screen widths.

So, this block:

<div class="col-sm-12 col-md-12 col-lg-12"></div>

can be reduced to

<div class="col-sm-12"></div>

Now let's see how we take it to create a responsive multi-screen grid.

Initially, it is advisable to establish the breaking points, i.e. the screen widths (in the order xs, sm, md, lg, xl) from which you want to change the width (in column number) of a block. In priority, it is better to start by managing xs and sm that require more attention because of the narrowness of the screen.

Example:

<div class="container">
        <div class="row">
            <div class="col-6 col-sm-3" style="background-color: gainsboro; color: forestgreen">A </div>
            <div class="col-3 col-sm-3" style="background-color: lightgray; color: forestgreen">B </div>
            <div class="col-2 col-sm-3" style="background-color: gainsboro; color: forestgreen">C </div>
            <div class="col-1 col-sm-3" style="background-color: lightgray; color: forestgreen">D </div>
        </div>
</div>
                               
A
                               
B
                               
C
                               
D
             

Bootstrap optimization

If your server is not ultra-fast, then work with a minimum version of Bootstrap and do not overload the classes but modify them directly with Sass. With Sass, keep only the minimum. If you have acquired themes for Bootstrap, embed them in Bootstrap. Use a minimized version of Bootstrap and put it if possible in the <style></style> section of your HTML page.


html5

Categories

Share

Follow


KodFor Privacy Policy