Bootstrap is a highly interesting and productive amalgam of three fundamental technologies i.e. JavaScript, HTML and CSS. An impressively dynamic nature of Bootstrap being an effective open-source framework makes it an ultimate choice for faster and easier front-end web development. The Bootstrap framework is made by the Twitter Team and provides great support for the addition of user-interface components. There are extensive features available to be customized in the Bootstrap based website themes and exploring them effectively can lead to prosperous outcomes. Technically equipped R&D from our UI Engineer has led to extensive innovations and improvisations to current Booststrap based themes. When it was presented to Client of vteam #365, he was delighted to see the improvements and appreciated our UI Engineer’s effort. Following elements were reshaped by using CSS3 for any bootstrap based theme:

Styling Featured Products:

• Used pseudo selectors to put angle brackets around the block
• Used transform property to animate the cart button from top to middle of the image
• Used transition property for smooth animation for cart button
  Examples:
  i- . class:after{}
  ii- .class:before{}
  iii- .class{transform:translateX(-50%); }
  iv- .class{transition:all 0.3s ease;}
  

Styling Menu:

• Used pseudo selectors to add the borders around the menu item
• Used transition animation to make the borders into rectangle shape around the menu item on hover effect
  Examples:
  i- . class:after{}
  ii- .class:before{}
  iii- .class{transition:all 0.3s ease;}
  

Styling Blog:

• Changed the single vertical listing to grid view
• Added background gradient using CSS gradient properties
• Used CSS translate property to align the author image in the middle of the item and positioned it on top
• Added shadow effect to the author image to make it look like embossed effect
• Added box shadow to the more button so it should come from the left edge.
  Examples:
  i- . class:after{}
  ii- .class:before{}
  iii- .class{background-image:linear-gradient(color1, color2)}
  iv- .class{transform:translateX(-50%); }
  v- .class{transition:all 0.3s ease;}
  vi- .class{box-shadow:0px 0px 5px rgba(0,0,0.0.5}
  

Styling Store Products:

• Used different CSS properties to achieve the expected layout using CSS e.g.
  -Calc Property
  -Pseudo Selectors
  -Box Shadow
  -Gradient Backgrounds
  -Not Selector
  -Transform Rotation
  Examples:
  i- . class:after{}
  ii- .class:before{ }
  iii- .class{width:calc(100% – 30px)}
  iv- .class:not(.specificElement){border-right:solid 1px black;}
  v- .class{background-image:linear-gradient(color1, color2)}
  vi- .class{transition:all 0.3s ease;}
  vii- .class{box-shadow:0px 0px 5px rgba(0,0,0.0.5}
  viii- .class{transform:rotate(45deg)}
  

Styling News:

• Used font awesome to use in content as Unicode to show the symbol in the right corner to the heading.
  Examples:
  i- .class:after{content:”\ f08e”  font-family:FontAwesome;}
  
  

Styling Banner:

• Used translate property to vertically center the captions text. Also used text shadow to make text blurred as water mark
  Examples:
  i- .class{top:50% transform:translateY(-50%); }
  ii- .class{text-shadow0px 0px 8px rgba(255,255,255,0.70); color:transparent;}
  
  

The Mobile Menu:

• Used the following properties to achieve the mobile menu icon to cross icon shape e.g.
  -Transform to rotate the icon bars to 45 degree
  -Transition Animation
  -Removed the center bar
  -Repositioned bars using absolute position
  -Made mobile menu 100% wide to the device width and set overflow hidden property to the body so that use can’t scroll the bottom contents and enabled mobile menu scroll only
  Examples:
  i- .class {transition:all 0.2s ease;transform:rotate(45deg);}
  

Pre-loading Images:

• Used pseudo selector attached to the body to store the device big images path in the contents so that these images should not take too much time to load
  Examples:
  body:after{display:none;ontent: url(../images/view-tablet-h.png) url(../images/view-tablet-v.png) url(../images/view-mobile.png);}