loading...

Bootstrap 3 – Putting it all together

Until now, we have discussed the various aspects of Bootstrap with LESS. We are not using the Bootstrap CSS CDN in this example as we are going to alter the bootstrap.less file, which will compile to bootstrap.css using the WinLess compiler.

You will now implement the knowledge you gained in a step-by-step approach:

  1. Download and unzip the Bootstrap files into a folder.
  2. Create an HTML file called bootstrap_example and save it in the same folder where you saved the Bootstrap files.

    The code for the bootstrap_example HTML document is as follows:

    <!DOCTYPE html>
    <html>
    <head>
    <title>BootStrap with Packt</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Downloaded Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>Welcome to Packt</h1>
    <button type="button"  >PACKT LESSONS</button>
    </body>
    </html>

    The output of this code upon execution will be as follows:

  3. The Bootstrap folder includes the following folders and file:
    • css
    • fonts
    • js
    • bootstrap_example.html

    This Bootstrap folder is shown in the following screenshot:

  4. Since we are going to use the Bootstrap source code now, let’s download the ZIP file and keep it at any location. Unzip it and we can see the contents of the folder as shown in the following screenshot:
  5. Let’s now create a new folder called bootstrap in the css folder. The contents of our css folder will appear as displayed in the following screenshot:
  6. Copy the contents of the less folder from the source code and paste it into the newly created bootstrap folder inside the css folder. Thus, contents of the same bootstrap folder within the css folder will appear as displayed in the following screenshot:
  7. In the bootstrap folder, look for the variable.less file and open it using Notepad or Notepad++. In this example, we are using a simple Notepad and on opening the variable.less file with Notepad, we can see the contents of the file as shown in the following screenshot:
  8. Currently, we can see @body-bg is assigned the default value #fff as the color code. Change the background color of the body element to green by assigning the value #00ff00 to it. Save the file and later on, look for the bootstrap.less file in the bootstrap folder. In the next step, we are going to use WinLess.
  9. Open WinLess and add the contents of the bootstrap folder to it. In the folder pane, you will see all the less files loaded as shown in the following screenshot:
  10. Now we need to uncheck all the files and only select the bootstrap.less file as shown in following screenshot:
  11. Click on Compile. This will compile your bootstrap.less file to bootstrap.css. Copy the newly compiled bootstrap.css file from the bootstrap folder and paste it into the css folder thereby replacing the original bootstrap.css file.
  12. Now that we have the updated bootstrap.css file, go back to bootstrap_example.html and execute it. Upon execution, the output of the code would be as follows:

    Thus, we can see that the background color of the <body> element turns to green as we have altered it globally in the variables.less file that was linked to the bootstrap.less file, which was later compiled to bootstrap.css by WinLess.

    We can also use LESS variables and mixins to customize Bootstrap. We can import the Bootstrap files and add our customizations.

  13. Let’s now create our own less file called styles.less in the css folder. We will now include the Bootstrap files by adding the following line of code in the styles.less file:
    @import "./bootstrap/bootstrap.less";

    Note

    We have given the path ./bootstrap/bootstrap.less as per the location of the bootstrap.less file. Remember to give the exact path if you have placed it at any other location.

  14. Now, let’s try a few customizations and add the following code to styles.less:
    @body-bg: #FFA500;
    @padding-large-horizontal: 40px;
    @font-size-base: 7px;
    @line-height-base: 9px;
    @border-radius-large: 75px;
  15. The next step is to compile the styles.less file to styles.css. We will again use WinLess for this purpose. You have to uncheck all options and select only styles.less to be compiled.
  16. On compilation, the styles.css file will contain all the CSS declarations from Bootstrap. The next step would be to add the styles.css style sheet to the bootstrap_example.html file.

    So your HTML code will look like this:

    <!DOCTYPE html>
    <html>
    <head>
    <title>BootStrap with Packt</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Downloaded Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>
    <h1>Welcome to Packt</h1>
    <button type="button"  >PACKT LESSONS</button>
    </body>
    </html>

    The output of the code is as follows:

    Since we changed the background color to orange ( #ffa500), created a border radius, and defined font-size-base and line-height-base, the output that was displayed in the preceding screenshot changed.

Tip

The LESS variables should be added to the styles.less file after the Bootstrap import so that they override the variables defined in the Bootstrap files. In short, all the custom code you write should be added after the Bootstrap import.

Comments are closed.

loading...