RGen Landing page builds on a bootstrap 4.0+ grid structure. <!– Grid row –> <div class=”row gt30 mb30″> <!– column –> <div class=”col-md-4″> … GIRD COLUMN CONTENT … </div> <!– column –> <div class=”col-md-4″> … GIRD COLUMN CONTENT … </div> <!– column –> <div class=”col-md-4″> … GIRD COLUMN CONTENT … […]
Background utilities
Background image Apply data-bg=”images/bg1.jpg” attribute on an element with your image path to apply a background image <!– ================================= = Background holder ================================= –> <div class=”bg-holder full-wh z1″> <!– Overlay –> <b data-bgholder=”overlay” class=”full-wh z5″ data-bgcolor=”rgba(45, 51, 69, 0)”></b> <!– Background image –> <b data-bgholder=”bg-img” data-bg=”images/bg10.png” class=”full-wh bg-cover bg-cc z1″></b> […]
Space Between Columns
Use following classes along with row to adjust space between columns. .gt0, .gt1, .gt2, .gt4, .gt10, .gt12, .gt14, .gt16, .gt18, .gt20, .gt22, .gt24, .gt26, .gt28, .gt30, .gt40, .gt50, .gt60, .gt70, .gt80, .gt90, .gt100
Alignment Classes
Use below-listed classes to adjust the alignment of content or elements. .align-l : Text align left .align-r : Text align right .align-c : Text align center .align-m : Text align middle .align-t : Text align top .flex-tl : Align inner elements top left .flex-tc : Align inner elements top center […]
Text Hover Colors
Use below list of classes to apply hover text colors .hov-txt-default, .hov-txt-primary, .hov-txt-secondary, .hov-txt-white, .hov-txt-dark
Text Colors
Use below list of classes to change text colors .txt-default, .txt-primary, .txt-secondary, .txt-white, .txt-dark, .txt-light
Font Weight
Use below list of classes to adjust font-weight of text .bold-n : For font-weight: normal; .bold-0 : For font-weight: 200; .bold-1 : For font-weight: 300; .bold-2 : For font-weight: 400; .bold-3 : For font-weight: 500; .bold-4 : For font-weight: 600; .bold-5 : For font-weight: 800; .bold-6 : For font-weight: 900;
Line Height
Use below list of classes to adjust line height of the content. .lh-1, .lh-2, .lh-3, .lh-4, .lh-5, .lh-6, .lh-7, .lh-8, .lh-9, .lh-10, .lh-11, .lh-12, .lh-13, .lh-14, .lh-15, .lh-16, .lh-17, .lh-18, .lh-19, .lh-20 <div class=”typo-light”> <h1 class=”title large fs50 lh-2″>Title text</h1> <p class=”title-sub small fs30 lh-3″>Sub title text</p> <p class=”fs18 lh-3″>Lorem […]
Font Sizes
Use below list of classes to adjust font size anywhere in the content. .fs11, .fs12, .fs13, .fs14, .fs16, .fs18, .fs20, .fs22, .fs24, .fs26, .fs28, .fs30, .fs32, .fs34, .fs36, .fs38, .fs40, .fs42, .fs44, .fs46, .fs48, .fs50, .fs52, .fs54, .fs56, .fs58, .fs60, .fs62, .fs64, .fs66, .fs68, .fs70, .fs72, .fs74, .fs76, .fs78, .fs80, […]
Text Transform
Apply class .txt-upper, .txt-lower, .txt-capi to change text case. <div class=”typo-light”> <h1 class=”title large txt-upper”>Title text</h1> <p class=”title-sub small txt-lower”>Sub title text</p> </div>