- Publish Date:
- Author:
- Shah
How To Properly Add Bootstrap 4 CSS Elements To Blogger Templates
Common Bootstrap 4 CSS Integration Issues on Blogger Template
The process to restyle our blog with Bootstrap CSS framework is a process to apply Bootstrap CSS elements in our pre-build HTML markup of our blog. This process is not only about integrating Bootstrap CSS files, there are a few other materials or re-design steps that can cause issues to our blog such as pre-installed blog CSS and widgets.
As we understand the Bootstrap integration process in blog is mainly about the CSS files. Therefor, the main issue we have is related to CSS elements issue between the installed Bootstrap CSS, pre-installed blog issue and external CSS for homepage, widgets, posts and static pages.
The CSS element issues are commonly resulted in the following situations.
Conflict of CSS classnames
This classname conflict issue happens when 2 set of different CSS files are using a same CSS classname for a CSS element such as navbar. This issue will make bootstrap does not function properly.
There are 3 steps can be to solve this issue.
- Add
b:css='false'in HTML attribute - To prevent blog engine from injecting CSS elements when we use a widget that have a same name with Bootstrap component such asnavbar. - Delete CSS elements in
<b:skin>and<b:template-skin>tags - Pre-installed CSS files in the<b:skin>and<b:template-skin>tags should be deleted to avoid this issue.Note - These 2 tags are required, which can not be deleted, and must be kept as empty tags in the<head>. Without these pre-installed blog CSS files, your homepage, posts or static pages will be a blank page. Therefor<b:section>tag of<body>tag needs to be re-designed with Bootstrap. - Arrange the CSS files positon in the
<head>tag correctly - Blog system applies a CSS element from any CSS files in the last position and it ignores any CSS elements with the same classname from other CSS files in the previous positon. Therefor, we need to carefully position any external CSS files in the<head>in the correct order. - External CSS elements - We can add external CSS elements for blog widgets or other styling purposes by adding the CSS elements in the
<style type="text/css">tag in the<head>tag. We need to rename these external CSS elements if these CSS elements have a same classname to Bootstrap CSS elements.
How to change Bootstrap CSS elements
In general, we can not make any change directly to Bootstrap CSS files because these files is linked to our blog from an external source. We can change a value of any Bootstrap CSS classname with this method.
- Change or add a new CSS value to any Bootstrap CSS classname - For an example, we assign a new font size and to CSS classname of "p" and make it as a new CSS element. So we can change p {margin-top: 0; margin-bottom: 1rem;} to p, .p {font-size:1.175rem;margin-top:0;margin-bottom:1rem}.
- Add the amended CSS clasname in the
<style type="text/css">tag in the<head>tag. - Place this
<style type="text/css">tag at the bottom after any bootstap<link>tags and before</head>tag.
Do you need to manually add Bootstrap 4 CSS files in your blogger template?
You do not need to manually add Bootstrap 4 CSS files in your blogger theme nor to download any bootstrap files. Once you link bootstrap CSS and Javascript files from Content Delivery Network (CDN) to your template, Bootstrap CSS framework is ready to function on your template.
Conclusion
In our next post, we will show how to design <body> section, to create homepage, post snippet and Bootstrap navigation menu, and a few other styling parts with bootstrap 4 CSS styling method. The process will automatically make your blog to become responsive and mobile friendly to different types of web browsers, screen sizes, orientation and platforms.
Reading List
