Shenoy Learning Bootstrap

Unearth the potential of Bootstrap to create responsive web pages using modern techniques
1. Auflage 2025
ISBN: 978-1-78216-185-1
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 204 Seiten

If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.

Autoren/Hrsg.

Shenoy, Aravind

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

Creating a blog layout with the Bootstrap Grid mixins and variables

Let's create a blog layout using Bootstrap mixins and variables:

1. We start with a basic HTML document containing the Bootstrap CSS file. Then, we add the relevant content to it and move step by step in order to understand how it all works.

   Take a look at the following code to understand this better:
2. Now, let's define the blog document structure. In the tag, we define the header with the blog title and description. Do not mix your thoughts about with ; both are different. We define the class for the header class:
3. Now that we have defined the blog title, we move on to the next part. At the bottom of the page, we add the copyright notice and assign the class to it:
4. Both the footer and header will be wrapped in a root element with the CSS class page. The blog post will be the HTML5 element with the post title in a element followed by the post content and all the post metadata in a element. We add the ARIA role to the article to mark it as the main section of our HTML document.

   Note

   
   

   For readers who are unaware of ARIA and its roles, in-depth information can be found at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA and http://www.w3.org/TR/wai-aria/roles.

   The full HTML code for the article will be the following:
5. The sidebar will show you the title of the recent posts and the date archives. They will be wrapped in a element with the ARIA role complementary in order to show you that the sidebar is independent of but complementary to the main content. Each section of the sidebar will be put in an element and will use an element for its heading:
6. The post and sidebar will be wrapped in a element with the CSS class content, which we will put between the header and footer elements. The resulting HTML document will be the following:

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

Styling the blog

We will now build the layout of the grid using some Bootstrap variables and mixins:

1. Create a file in the directory. Copy Bootstrap's files from the unzipped source code folder and paste them into the folder within a directory called . The folder will look as shown in the following screenshot:
2. The file inside the folder contains the source code files, including the file. The contents of the folder inside the folder will look as shown in the following screenshot:
3. Open the file in a notepad or your favorite editor. The next step will be to import using the following line to include file in it:
   @import "bootstrap/bootstrap.less";
4. Then, we center the root element (the element with the CSS class) on the screen and add some width to it. To center the element, we use the Bootstrap mixin. This is the one that Bootstrap uses internally in the CSS class. We add the mixin in our LESS file as follows:
   .page { .container-fixed(); }

   After we add the mixin to the root element, the element will still occupy the full width of the screen. This behavior is desirable on phone screens, but it's not what we want on tablets and desktop screens.

5. We then set the maximum width to 728 px for tablets and 940 px for desktop screens by targeting these device screens with Media Queries.

   The following LESS code will target the tablets. Notice the use of the LESS...