BootstraBlogger- UI Components

A well sought-out and beautiful design system for all type of Blogger projects based on latest version of Bootstrap and Xml

BootstraBlogger gives you a full solution for all your Blogger Portfolio,Landing and E-commerce product catalogs make up your design workflow with ready-to-use beautifully designed sample blogger components for your daily projects.
Note: All components and elements are based on bootstrap frameworks and Xml. We have enhanced the components and added more elements for your Blogger projects.

Benefits Of This BootstrapBlogger Framework

The main purpose of this Booststrablogger Components (Css Framework) is to give a full solution to designers and developers in the categories of all type of blogger Themes, online marketplaces, Portfolio platforms and product landing blogger. This kit provides multiple combinations of examples and sample section and widgets for you to work on including numerous components and element styles.

What this BootstrapBlogger kit includes

Booststrablogger offers easy-to-use and fully customizable elements including CSS and XML files along with the templates

• Well organized file structure
• Fonts and SVG, Demo images
• SASS files with minimal code and variables
• Blogger Xml and basic script codes, slider samples, Card
• Clean code for Blogger XML, CSS and SASS based on latest Bootstrap and XML
• 6+ ready-to-use widgets and UI blogger components
• Ready-to-use blogger Xml template

Download

Designer version

With the designer version of Booststrablogger Framework you will get a full package of interactive, reusable and customizable UI components and sample Widgets which are compatible for both blogger Xml and bootsrap.

Developer version

The developer version of Booststrablogger comes with clearly-coded and sought-out source files in blogger Xml, CSS and SASS. Over 10+ widgets which are related to ecommerce are fully customizable and easy-to-use and easy-to-implement in your ecommerce projects. The widgets come in with SVG icon and Fonticon formats for flexible usability.

BootstrapBlogger License

Rights

Copyright (c) 2020

You have rights for royalty free use of our resources for any and/or all of your personal and commercial projects. You may modify the resources according to your requirements and use them royalty free in any and/or all of your personal and commercial projects. For example, you may include this resource in a Blogger you will be designing for a client. You are not required to attribute or link to Booststrablogger in any of your projects. Booststrablogger will not be responsible for any outcome that may occur during the course of usage of our resources. We reserve the rights to change and revise the resources usage policy at any moment.

BootstrapBlogger Prohibitations

You do not have the rights to redistribute, resell, lease, license, sub-license or offer the file downloaded to any third party. For any rescalable Blogger applications you should not include our graphic resources as an additional attachment. This will be considered as a redistribution of our resources which is forbidden by us - Booststrablogger

Quick start

To start using this BootstraBlogger design system you will first need to import some files in your project or download ready to use starter templates.

File structure

	
📂BootstraBlogger /
├── dist/
│   └── template.xml
├───📂 docs/
├── 📂 scss/
│   ├── BootstraBlogger / bootstraBlogger sass
│   └── BootstraBlogger / css... 
└── 📂 template-src/
    ├── 📂 default-markups/
    ├── 📂 includable/
    ├── 📂 partials/slider/
    ├── 📂 post/
    ├── 📂 widgets/
    ├── 📂 config.json
    ├── 📂 index.xml
    ├── 📂 Css/skin/layout.css 
    └── 📂 script.js
	└── 📂  bootstrablogger and Xml-Developement-components/
	└── UI 10+ BootstraBlogger  and XML widgets Developement-components ready to use
	
	

XML

Copy and paste the blogger Xml <Xml> into your <Blogger Html Editor> and get ready for develope.

JS

Most of BootstraBlogger components require the use of JavaScript to function. Specifically, they require jQuery, Bootstrap.bundle.js and Poper.
We added some popular js in the BootstraBlogger Xml like slider and slickslider. Our script.js file contains some additional scripts which may come handy for your project.

Starter template (blogger XML)

		
<?xml version='1.0' encoding='UTF-8' ?>				  
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' 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'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>data:blog.pageTitle.escaped</title>
<b:skin>
				
<![CDATA[<
!--(Athor)--
!--(Variable.css)--
!--(skin.css)--
>]]>

</b:skin>
				
<b:template-skin>
<![CDATA[<
!--(layout-variables.css)--
!--(layout-mode.css)--
>]]>

</b:template-skin>
			
</head>
<body>
			
<b:comment>
 =================================================
Main header
 ================================================= 
</b:comment>

<b:section class='b-section-header-nav' id='b-section-header-nav' name='Header nav'>
<b:widget id='header' locked='false' title='Header' type='header' version='2' name='header' visible='true'>
...
</b:widget>
</b:section>


<b:comment>
=================================================
Main and sidebar
================================================= 
</b:comment>

<div class='main-and-sidebar' id='main-and-sidebar'>
<div class='container'>
<!-- Main -->
<main class='col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 main blogger-col-8' id='main'>
<b:section id='b-section-main' maxwidgets='1' name='Main' showaddelement='no'>
<!--( widgets/b-section-main__Blog1.xml)-->
</b:section>
</main> <!-- /.main -->

<!-- Sidebar -->
<aside class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 sidebar mt-5 mt-md-0 blogger-col-4' id='sidebar'>
<b:section class='wg wg-card wg-card-light wg-title-dark wg-section-no-mb' id='b-section-sidebar' name='Sidebar'>
<!--( widgets/b-section-sidebar__HTML1.xml)-->
<!--( widgets/b-section-sidebar__BlogArchive1.xml)-->
</b:section>
</aside><!-- /.sidebar -->


</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.main-and-sidebar -->					
</body>
</html>
					
	          

Colors

Main background colors

<b:section class='wg wg-container wg-bg-light wg-title-dark' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-primary wg-title-light' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-secondary wg-title-black' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-orange wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-darkwg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-light wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-primary-light wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-light  wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-success wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-purple  wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-danger  wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-teal wg-title-white' id='sectionId'></b:section>
<b:section class='wg wwg-container wg-bg-orange  wg-title-white' id='sectionId'></b:section>
<b:section class='wg wg-container wg-bg-cyan  wg-title-white' id='sectionId'></b:section>

Text colors

Typography

Wg-h (title) Mixing

Display 1,2,3,4

wg-display Mixing

More information

If you use SASS, you can play around with the variables ($variable), the files can be found in /sass/BootstraBlogger .scss or directly from bootsrap's source /sass/bootstrap-assets/type.scss

Feel free to use bootstrap's text classes like .lead, .blockquote, .small, for colors text-muted and so on
For more information visit: https://getbootstrap.com/docs/4.3/content/typography/

Icons

Font Awesome icons

We have included some free icons from FontAwesome 5. You can use them by insterting these special tags, for example:

Helper classes

widget wider and height paddings

	
.wg-padding-y {padding-top:40px; padding-bottom:40px;}
.wg-padding-top {padding-top:40px;}
.wg-padding-bottom{padding-bottom:40px;}

.wg-padding-y-lg{padding-top:80px;  padding-bottom:80px;}
.wg-padding-top-lg{padding-top:80px;}
.wg-padding-bottom-lg{padding-bottom:80px;}

.wg-padding-y-sm{padding-top:20px; padding-bottom:20px;}
.wg-padding-top-sm{padding-top:20px;}
.wg-padding-bottom-sm {padding-bottom:20px;}
	

Mixing Wg-padding

• .wg-1-padding-y-sm - first widget type
• .wg-3-padding-top-sm - second widget type
• .wg-2-padding-bottom-sm - third widget type

Image and icon sizes

		
		.wg-img-xs{width:40px; height:40px; }
		.wg-img-sm{width:80px; height:80px; }
	    .wg-img-md{width:140px; height:140px; }
		.wg-img-lg{width:250px; height:250px; }
		
	

		
		.wg-icon-xs{ width:32px;  height:32px;  line-height:32px; font-size:16px; }
		.wg-icon-sm{ width:42px;  height:42px;  line-height:42px; font-size:20px; }
		.wg-icon-md{width:60px;  height:60px;  line-height:60px; font-size:28px; }
	     .wg-icon-lg{width:96px;  height:96px;  line-height:96px; font-size:42px; }
		
	

Widget Margins and Paddings

wg -paddings

	
	.wg-p-0 {.wg-p-1} {.wg-p-2} {.wg-p-3} {.wg-p-4}{.wg-p-5}
.wg-pt-0 {.wg-pt-1} {.wg-pt-2} {.wg-pt-3} {.wg-pt-4}{.wg-pt-5}
.wg-pb-0 {.wg-pb-1} {.wg-pb-2} {.wg-pb-3} {.wg-pb-4}{.wg-pb-5}
.wg-py-0 {.wg-py-1} {.wg-py-2} {.wg-py-3} {.wg-py-4}{.wg-py-5}
.wg-px-0 {.wg-px-1} {.wg-px-2} {.wg-px-3} {.wg-px-4}{.wg-px-5}


	

wg -margins

	.wg-m-0 {.wg-p-1} {.wg-m-2} {.wg-m-3} {.wg-m-4}{.wg-m-5}
.wg-mt-0 {.wg-mt-1} {.wg-mt-2} {.wg-mt-3} {.wg-mt-4}{.wg-mt-5}
.wg-mb-0 {.wg-mb-1} {.wg-mb-2} {.wg-mb-3} {.wg-mb-4}{.wg-mb-5}
.wg-my-0 {.wg-my-1} {.wg-my-2} {.wg-my-3} {.wg-my-4}{.wg-my-5}
.wg-mx-0 {.wg-mx-1} {.wg-mx-2} {.wg-mx-3} {.wg-mx-4}{.wg-mx-5}


	

Bootstrap container size and Grid

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

BootstraBlogger widget columns size and Grid

Normal mixing widget

<b:section class='wg-row wg wg-title-blue wg-sm-6 wg-md-4 wg-lg-3' id='sectionId'></b:section>

Normal mixing same size widget

do not forget to add (wg-row)wg-row on each widget row yo create

<b:section class='wg-row wg wg-bg-success wg-title-orange wg-sm-6 wg-md-6 wg-lg-4' id='sectionId'></b:section>

mixing Grid widget

<b:section class='wg-row wg wg-bg-primary wg-title-white wg-row wg-1-sm-6 wg-3-sm-6 wg-2-sm-12 wg-1-lg-3 wg-2-lg-6 wg-3-lg-3' id='sectionId'></b:section>

More mixing Grid widget

<b:section class='wg-row wg wg-bg-info wg-title-secondary wg-row wg-1-sm-6 wg-mt-2 wg-2-sm-6 wg-3-sm-6  wg-4-sm-6 wg-1-lg-7 wg-2-lg-5 wg-3-lg-3 wg-4-lg-9' id='sectionId'></b:section>

To attain equal columns height, you must add wg-equal-height-cols

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

<b:section class=' wg-sm/md/lg/xl-{1-12} wg-size-{1-12}' id='sectionId'></b:section>

<div class="row">
  <div class="col-md-8">
 
<b:section class='wg-equal-height-cols wg-title-dark wg-row wg-md-6' id='sectionId'>
  
  <b:widget id="HTML1" title="HTML1/JAVASCRIPT"   type="HTML"  vision="2">
 
  </b:widget>
   <b:widget id="HTML2" title="HTML1/JAVASCRIPT"   type="HTML"  vision="2">
 
  </b:widget>
  </b:section>
  </div>   
  <div class="col-md-4">
  
<b:section class='wg wg-title-dark ' id='sectionId'>
  
     <b:widget  id="HTML3" title="HTML1/JAVASCRIPT"   type="HTML"  vision="2">
 
  </b:widget>
  
  </b:section>
  
</div>
</div>

Buttons

Forms

Customizes

Bootstrablogger Badges and mixing

Rating

Card and boxes

Customizes

Images

Navbars

Basic navbar

Navbar multi nav

It's easy to create a navbar with multi navigation by adding class mr-auto or ml-auto, this pushes the next menu to the other side

Simple horizontal nav

Simple horizontal nav (dark)

Customizes

Icon with text

Product grid

Customizes

Product list

Customizes

Product detail

BootstraBlogger Sidebar Filters

BootstraBlogger Shopping cart

BootstraBlogger Features

BootstraBlogger footers

Carousels

Do you need help?

Give an idea or report an issue.
Write: Bootstrablogger @gmail.com
Whatsapp: Online chat