Warning! By default, the Display Virtual Grid Bootstrap library is activated when this page starts. This explains why the presentation of the content may seem strange. Click on the green "GRID ON" button located at the top left to temporarily disable the library and read the instructions to install and use Display Virtual Grid Bootstrap, the understanding and proficiency of the Bootstrap "grid" concept.

What is Display Virtual Grid Bootstrap?

Display Virtual Grid Bootstrap is a CSS library whose objective is to help you understand the concept of a 12-column grid used by another famous CSS library: Bootstrap

This tool simply makes the invisible visible. Thus, the library allows you to display in real time the 12 virtual columns of the Bootstrap grid to make your task easier in the design of your Web interfaces, but also to better understand the concept of responsive web design which is the heart of Bootstrap

Virtual Grid Representation:

Boostrap 12 column virtual grid illustration

To see what the Display Virtual Grid Bootstrap library actually does and how it can help you, an example of "grid" visualization is available below. Remember to click again on the button located at the top left if you have temporarily deactivated the library to read this text.

Use this helper tool to visually display the Bootstrap 12-column grid during the design of the HTML code, preferably before putting content in it (images, texts, etc.). However, it is quite possible to use it with already integrated content.

In this case, be aware that this will inevitably have a temporary impact on the rendering (without breaking everything) and this, as long as the library remains activated. This is completely normal, since the Display Virtual Grid Bootstrap CSS acts directly on the following Bootstrap classes:
.container, .container-*, .container-fluid, .row, .col, .col-* and .col-*-*.

How to install Display Virtual Grid Bootstrap

1) Download the compressed file, then unzip it. You will find three folders. One named _example, a second named CSS and the third named JS.

2) In the CSS folder, get the file "display-virtual-grid-bootstrap.css" and place it in the CSS folder of your project. There is a minified version of the file if you prefer.

3) In the same way, get the file "display-virtual-grid-bootstrap.js" and place it in the JS folder of your project. There is also a minified version of the file if you prefer.

4) The following 3 lines of code are to be integrated into the <head> of the HTML page want, still after the CSS call of Bootstrap, but before your own style CSS:


    <!-- CSS et JS display-virtual-grid-bootstrap -->
    <link rel="stylesheet" href="your-url/display-virtual-grid-bootstrap.css">
    <script defer src="your-url/display-virtual-grid-bootstrap.js"></script>

Note: Replace "your-url" with your own project tree path.

How to use Display Virtual Grid Bootstrap

Once the library is integrated, a green button with the inscription "GRID ON" is automatically created at the top left of the page concerned. By default the Bootstrap virtual grid visualization system is enabled. If you want to disable it temporarily, just click on the button in question. Do the same to reactivate the visualization of the grid as soon as you need it.

Note: A cookie will be created by Display Virtual Grid Bootstrap. It allows to keep the activated or not activated state of the visualization of the grid, even after a refresh of the page. This cookie expires after 24 hours. It does not record any information from your computer. It is only used for the proper functioning of the library. This cookie is called "displayGrid" and can take two values: 0 or 1. And that's it! You can also check this in the console of your browser.

Warning: Cookie creation only works if you go through a server (local or online). For example Lamp, Mamp, Wamp, Xampp or Live Server (from VSCode) are perfectly suitable. The servers of all hosting providers are compatible with the Display Virtual Grid Bootstrap library.

It is imperative to respect the two basic structures of Bootstrap for the Display Virtual Grid Bootstrap library to work correctly:


    section[header|footer|article|div|other]
        div.container
            div.row
                div[article|autre].col|.col-*|.col-*-*]
                    div[article|autre][.card|.maclass|.other]


    section[header|footer|article|div|other]
        div.container-fluid
            div.row
                div[article|autre].col|.col-*|.col-*-*]
                    div[article|autre][.card|.maclass|.other]

Display Virtual Grid Bootstrap is compatible with Bootstrap versions 4.x and 5.x

Remove Display Virtual Grid Bootstrap

Remember to remove the 3 lines of code embedded in the <head> tag and remove the “display-virtual-grid-bootstrap.css” and files "display-virtual-grid-bootstrap.js" in your project's CSS and JS folders once you no longer need the Display Virtual Grid Bootstrap library.

Hope you find this help tool useful.

Have fun!

PS: If you find this library useful, then talk about it around you to make it known. Word of mouth is a great vector of transmission.

Example

This is an example of what the Display Virtual Grid Bootstrap library adds to allow you to view the 12-column grid and the HTML objects that are distributed in it. Click the red "GRID OFF" button on the top left to temporarily disable the helper tool.

Content