create Homepage in blogger using bootstrap

 

Homepage - Design Process

The technique to style a homepage using Bootstrap 4 is easy and straightforward. This post shows a homepage with a right sidebar and a single section homepage styling method, which we are familiar with. There are many other homepage designs you can create for your blogger theme such as a minimalist homepage, a homepage with multiple sidebars or a homepage with a left sidebar styles.

At this stage, the homepage styling process is mainly to position the homepage main section and the sidebar section in a horizontal position order. We need to apply Bootstrap grid system to <b:section id='main'>...</b:section> and <b:section id='sidebar'>...</b:section>. Below are two important concerns to create a horizontal position order for the main section and the sidebar.

1. Apply <div class='col'> to the main section or above the <b:section id='main'> in order to keep the width of main section flexible to the width of the sidebar section. This rule is also to ensure that the main section is responsive to the medium (md) screen view and below. We do not apply any column grid to the main section in order to ensure the width of the main section is responsive to all screen view breakpoints.
2. Apply <div class='col-md-4 offset-md-12'> to the sidebar section or above the <b:section id='sidebar'>. Without this column offset CSS component, the homepage will display a main section and the sidebar section in a vertical position order. You can decrease the width of sidebar section by using col-md-3 or increase the width by using col-md-5 as you prefer.

Below are HTML markup examples for a homepage with a right sidebar and a single section homepage style. These styles are only for a general guideline to understand the process to create a Bootstrap 4 Blogger theme

A Homepage With A Right Sidebar Code

<div class='row m-0'> <div class='col'> <b:section class='ml-0 mr-0 mb-5 mb-md-5 pb-md-5 mb-lg-0 pb-lg-0' id='main' name='Main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>...</b:widget> </b:section> </div> <b:if cond='data:blog.pageType != "error_page"'> <div class='col-md-4 offset-md-12 d-none d-md-block m-0 p-0 mb-5'> <b:section class='sidebar m-0 mb-5 p-0 bg-none' id='sidebar' preferred='yes'> <b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>...</b:widget> <b:widget id='HTML2' locked='false' title='' type='HTML' version='1'>...</b:widget> <b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>...</b:widget> </b:section> </div> </b:if> </div>

1. <div class='row m-0'> : Normally, we concentrate on large screen view when we design our theme. We do not give any attention to the display on small and extra small screen views. Bootstrap 4 row element can create an overboard layout display problem on small and extra small screen views which may be unnoticed. Therefor, we need to use m-0 CSS components to ensure that the row is within the width of a page layout for the extra small and small screen views. This problem can also derive from our inline CSS styling method when we dictate the width of any images, widgets or components.
2. At this point, we want to make sure that the width of homepage matches the width of the layout display by using ml-0 and mr-0. We need to avoid a redundancy in creating the page margin with the margin we design for our post snippet. Hence, our left and right page margin will not become too wide or difficult to adjust.
3. The visibility of the sidebar on your selected screen sizes, is determined by display property (d-none d-md-block). We can display the sidebar section on our small (sm) screen view and above by changing the display property to d-none d-sm-block.

A Single Section Homepage

<div class='row m-0'> <div class='col'> <b:section class='ml-0 mr-0 mb-5 mb-md-5 pb-md-5 mb-lg-0 pb-lg-0' id='main' name='Main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>...</b:widget> </b:section> </div> <!-- NOTE: You can delete the entire column below to create a homepage without a sidebar. However we suggest that you use 'd-none' to hide this column --> <b:if cond='!data:view.isPage and !data:view.isPost'> <b:if cond='data:blog.pageType != "error_page"'> <div class='col-md-4 offset-md-12 d-none m-0 p-0 mb-5'> <b:section class='sidebar m-0 mb-5 p-0 bg-none' id='sidebar' preferred='yes'> <b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>...</b:widget> <b:widget id='HTML2' locked='false' title='' type='HTML' version='1'>...</b:widget> <b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>...</b:widget> </b:section> </div> </b:if> </b:if> </div>

1. <div class='col-md-4 offset-md-12 m-0 p-0 mb-5 d-none'>..</div> : To create a single section homepage is simply by applying bootstrap CSS display property d-none to hide the sidebar as shown above.
2. Or, you can also delete this section.