Posts

Showing posts with the label Bootstrap 4

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. 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...
Post a Comment
Read more

How To Install Bootstrap Navbar Component To Blogger Theme

Image
  How To Install Bootstrap Navbar Component To Blogger Theme As mentioned before, we do not use pre-installed Blogger navbar and header widgets on our blogger theme. We install Bootstrap 4 navigation bar and header directly into our template. The other important issue is about Bootstrap navbar CSS class name which need to be changed to a new CSS class name. This issue occurred due to a CSS class name conflict with the pre-setting blogger widget styling. You may refer to our previous post for the method to change Bootstrap 4 navbar class name. Below is the HTML markup to position the Bootstrap 4 navigation bar and header of the template. Setting of the components is important as we want to place them at the most top of the page. Hence, other components, which are visible on any page, should not be installed above these component HTML markups ... ... Copy This Code Method Explanation The Bootstrap Navbar and Heade...
Post a Comment
Read more

How To Prepare body Section in blogger using bootstrap

  How To Prepare  <body>  Section There are 2 things we need to know before we start to re-style  <body>  section. First,  <body>  section must have at least one  <b:section>  and  <macro:includable id='sections' var='col'> . If we delete the entire contents of the  <body>  section or the section does not contain any  <b:section>  and/or  <macro:includable id='sections' var='col'> , our theme will not function. The blogger engine will inform us about the mistake and it will not allow us to save the changes we make to the  <body>  section. Second, a ready-made blogger theme contains pre-setting core template  <div>  tags in the  <body>  section, which we need to delete. These pre-setting core template  <div>  tags will create additional spaces to widgets on our template, which we are not able to modify o...
Post a Comment
Read more

Bootstrap 4 Jumbotron Component Installation Process

  Bootstrap 4 Jumbotron Component Installation Process The Bootstrap 4 Jumbotron Component can be added to any section of the template. This post is to explain the process to install the component to header section only. The method requires a copy and paste process, which makes it easy to add the component on any part of the template such as post content. Where to place a jumbotron for header section The HTML markup for jumbotron component should be place inside the  <header>  tag after the  <nav>  tags markup as shown in the example below. Html Code --- --- --- Copy This Code Full Code For The Bootstrap 4 Jumbotron Header This code is to create a jumbotron that occupies the entire horizontal space of your page layout. This jumbotron is more suitable for header as it is applied CSS element of background-image to displ...
Post a Comment
Read more