Guide to use Bootstrap class to custom the blocks on MGS Frontend Builder

If you are developer, you will know excellent utility of the bootstrap. But if you aren’t developer, you can use free time see this page, we believe this page will help you thought excellent utility of the bootstrap.

Bootstrap is a free and open-source collection of tools for creating web and web applications. It’s the most popular Html, Css and JavaScript framework for developing responsive, mobile first web sites. In the MGS Frontend Builder theme used bootstrap for build theme of it.

Right now, we will guide you some class for custom block in MGS frontend builder:

1.Column Config Block: when you created section or block in sections you will see in column config and block col in section setting as below:

column-setting

column-setting1

In bootstrap includes a responsive, mobile first fluid gird system that appropriately scales up to 12 column as the device or view port size increases. Gird columns are created by specifying the number of twelve available columns you to span.

  • Twelve equal columns would use twelve .col-md-1
  • Three equal columns would use three .col-md-4
  • Two equal columns would use two .col-md-6
  • Three column and nine column would use class .col-md-3 and .col-md-9
  • Four column and eight column would use class .col-md-4 and .col-md-8

bootstrap_illustrator_template

Gird classes apply to devises with screen widths greater than or equal to the breakpoints sizes and override grid classes targeted as smaller devices.

See how aspects of the bootstrap grid system work across multiple devices with a handy table.

column-setting2Ex: we create three equal promo banner block display in all devices. We’re create three promo banner block width each block col select number three.

promo-settingAfter setting, you’re see the result in desktops:

promo-setting32. Custom class on block: if you want setting style for blocks, you will setting field custom block on General tab.

We will guide some important classes as below:

  • Pull left, pull right(quick floats): floats an element to the left or right with a class.
    • .pull-left: floats an element to the left.
    • .pull-right: floats an element to the right.
  • Text left, text right, text-center(alignment classes) : easily realign text to components with text alignment classes.
    • .text-left: left aligned text
    • .text-right: right aligned text
    • .text-center: center aligned text
  • Available classes: use a single or combination of the available classes for toggling content across viewport breakpoints.

You see image as below:

column-setting3The .visible-*-* classes for each breakpoint come in three variations, one for each Css display property value listed below:

column-setting4

Ex: you custom class for extra small screens: .visibkle-xs-block, .visible-xs-inline, .visible-xs-inline-block, .hide-xs .

Also, you have still custom class for yourself for block style.

 We will guide some important classes as below:

Initial: block “what items” in the left.

Untitled

custom class for promo banner block:

promo-setting4

Results:

On desktop

resultOn devices Tables and mobile iphone:

result1Congratulations! You have successfully completed your installation.

Rate This Article

(7 out of 15 people found this article helpful)

Leave A Comment?