How To Properly Link Bootstrap 4 CSS File To Blogger
A guideline to link Bootstrap 4 CSS files to blog to ensure that it is completely functioning for homepage, posts and other static pages.
How To Properly Link Bootstrap CSS Files To Blogger
A guideline to link Bootstrap CSS files to blog to ensure that it is completely functioning for homepage, posts and other static pages.
Overview
There are 2 important phases in the Bootstrap 4 integration process, which requires us to amend blog <head> and <body> sections as shown below.
1 Material Integration : This phase is to integrate bootstrap CSS files to our template, to link Javascript files for our Bootstrap components and to ensure that our template is responsive and mobile friendly.
Add Required <meta> Tag in the <head> section.
Link Bootstrap CSS stylesheet files in the <head> section.
Add required Javascript Files in the <body> section.
Note You will be able to use Bootstrap 4 styling upon the completion of the preliminary installation process to write your posts or to add Bootstrap 4 components such as navigation menu and carousels. However, your homepage remains as pre-installed design and it requires an additional process to redesign it with Bootstrap.
2<body> section styling : This phase is the main styling phase which determines our template design.
How to add basic components such as navigation bar and footer.
How to make a template with or without sidebar.
How to style a post snippet.
A step-by-step implementation process for the <body> section styling is to be detailed out in this post : Design Your Blogger Template With Bootstrap 4 CSS.
Material Integration
We need to adhere to the design and development standards in order to get the most out of Bootstrap 4. Therefor, it is important to incorporate the Bootstrap 4 material integration to our Blogger template.
For our general knowledge, we should know that Bootstrap 4 requires the declaration of HTML 5 <!DOCTYPE>, which in the format below.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:version='2' class='v2 ltr no-js rwd index' dir='ltr' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
...
</html>HTML Attribute
This <html> attribute is recommended to ensure Bootstrap 4 completely works on your theme.
-
b:css='false'- To removes any default CSS included in your template by Blogger that would lead to Bootstrap components failure or improper installation issues when the CSS elements of both frameworks have same class names. - Do not add
b:js='false'- This attribute will disable the edit function of the layout components.
Required <meta> Tag
Bootstrap 4 requires only 1 meta tag which is viewport <meta> tag, which should be added after <head> tag. Viewport <meta> tag is to enable a proper rendering and touch zooming on mobile devices.
The example of viewport <meta> tag for blogger is in the format below:
<meta content='width=device-width,initial-scale=1.0' name='viewport'/>Example of Meta Tags commonly used in Blogger template
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,user-scalable=no' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
...
</head>Optionally, we can disable zooming capabilities on mobile devices by adding user-scalable=no to the list of content values of the viewport <meta> tag. However, this is not recommended because it will be a disadvantage to the readers with impaired vision.
Required Bootstrap CSS Files
The process to install Bootstrap 4 CSS on Blogger template is straightforward and easy. We must properly integrate and implement this file in order to ensure that it is completely functioning. Improper Bootstrap 4 CSS installation will normally result in certain parts of CSS elements fail to function, which are commonly unnoticed.
Know Which Bootstrap Version To UseWe need to know the exact version of Bootstrap we integrate to our blog. We should understand that each Bootstrap version has its unique CSS and JS files. We can find this free information about Bootstrap versions at getbootstrap website.
How To Add Bootstrap 4 CSS stylesheet<link> in the <head> section.
Bootstrap 4 CSS stylesheet <link> is required to enable CSS loading and components styling purposes. This CSS file must be the compiled CSS file from the same Bootstrap version. If we use a compiled CSS file from other Bootstrap version, we will have a problem to use Bootstrap components because it is not compatible with compiled JS files we install.
Required Bootstrap 4 CSS stylesheet files : At this stage, Bootstrap 4 CSS files which we need to link to our template is Bootstrap v4.5.0 and MDBootstrap material design for Bootstrap V4.19.1.
Bootstrap 4 CSS stylesheet <link> example : In general, Bootstrap 4 CSS stylesheet <link> for Blogger is in the format below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"/>The Bootstrap 4 CSS stylesheet <link> must be added before </head> tag.
More than one stylesheet <link>s : We need to use more than one stylesheet <link> for our template styling purposes such as font stylesheet and component stylesheet. The position order of these stylesheet <link> needs to be arranged correctly to ensure that CSS elements from these CSS files are successfully loaded onto our template. As we understand when CSS files share a same CSS class name, Blogger engine will load and apply CSS elements from a CSS file that is at the last position and ignore the CSS elements from other CSS files before it. Therefor, we can determine that Blogger engine will load the right CSS elements from the files we want by positioning CSS stylesheet <link> in the right order.
We suggest these basic required CSS files and CSS stylesheet <link> position order as a general reference.
<head>
.....
<!-- Basic Bootstrap Component CSS Files -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet'/>
<!-- Other custom or component CSS Files (optional) -->
<link rel='stylesheet" href="css/style.css'/>
</head>You may notice that we are not using any Bootstrap core CSS and Javascript files from Getbootstrap because Getbootstrap filenames contain ampersand symbol of "@". An example of Getbootstrap Core CSS File is as below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>Required Javascript Files
There are 2 options to install Bootstrap 4 Javascript files as shown below
First option requires only bootstrap.bundle.js. Second option requires bootstrap.bundle.min.js and popper.min.js files. In addition, we need to install jquery.min.js and mdb.min.js files to blog template. This Javascript position order, at the end of document, ensures that pages load faster.
The reference for JavaScript files are available at Getbootstrap website based on our selected Bootstrap version. As different version of Bootstrap uses different JavaScript files, we need to install the correct files based on our selected version.
JavaScript files and position order example: This example is based on Bootstrap v4.5.0
<!--Example of JavaScript: placed at the end of the document so the pages load faster-->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script type='text/javascript' src='https://cdn.usebootstrap.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js'/>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js'/>
-->
<!-- MDB core JavaScript -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js'/>
<!--jQuery library-->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
</body>How To Add Bootstrap 4 Widget Javascripts
<script>s for Bootstrap components such as touchswipe or scrollbar should be placed or added before jQuery <script>.
Bootstrap 4 Blogger Template HTML Markup Example
The HTML Markup example below is only a general idea which contains basic Bootstrap 4 requirements of the necessary !DOCTYPE preamble, links to CSS and JS files, and the viewport <meta> tag.
<!DOCTYPE html>
<html b:css='false' b:version='2' class='v2' dir='ltr' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0' name='viewport'/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet'/>
<!-- Other custom or component CSS Files (optional) -->
<link rel='stylesheet" href="css/style.css'/>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<!-- YOUR CONTENT HERE -->
Bootstrap components initialize <script> can be placed before the Required Bootstrap 4 <script>.
<!-- Examples -->
<script type='text/javascript'>
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
<!-- End of Examples -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script type='text/javascript' src='https://cdn.usebootstrap.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js'/>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js'/>
-->
<!-- MDB core JavaScript -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js'/>
<!-- Component Scripts-->
<script type='text/javascript' src='GENERAL EXAMPLE'/>
<!--jQuery library-->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
</body>
</html>
Share this article
