@extends('layouts.master') @section('css') @endsection @section('main_content')

Helper Classes

Styles in Borders

Use the different styles of borders likeborder radius/border-color/border-widthUse of any components.

Border radius class
.b-r-0
.b-r-1
.b-r-2
.b-r-3
.b-r-4
.b-r-5
.b-r-6
.b-r-7
.b-r-8
.b-r-9
.b-r-10
Border color
.border-primary
.border-secondary
.border-tertiary
.border-success
.border-danger
.border-warning
.border-info
.border-dark
Border-width
.b-w-1
.b-w-2
.b-w-3
.b-w-4
.b-w-5
.b-w-6
.b-w-7
.b-w-8
.b-w-9
.b-w-10
Text colors
C
.font-primary
C
.font-secondary
C
.font-tertiary
C
.font-success
C
.font-danger
C
.font-warning
C
.font-info
C
.font-dark
C
.font-light

Border and Displays

Use all direction.b-t-*/ .b-b-*/ .b-l-*/ .b-r-*border components.

Additive border
.border
.border-top
.border-bottom
.border-start
.border-end
Subtractive border
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
Additive radius
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-pill
.rounded-circle
.rounded-0

Styles in Borders

Use the different styles of borders likeborder radius/border-color/border-width.Use of any components.

Dark background
.bg-primary
.bg-secondary
.bg-tertiary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-dark
.bg-light
Light backgrounds
.bg-light-primary
.bg-light-secondary
.bg-light-tertiary
.bg-light-success
.bg-light-danger
.bg-light-warning
.bg-light-info
.bg-light-dark
.bg-light-light

Border color

Use all direction.b-t-*/ .b-b-*/ .b-l-*/ .b-r-*border components.

.b-t-primary
.b-b-primary
.b-l-primary
.b-r-primary
.b-t-secondary
.b-b-secondary
.b-l-secondary
.b-r-secondary
.b-t-tertiary
.b-b-tertiary
.b-l-tertiary
.b-r-tertiary
.b-t-success
.b-b-success
.b-l-success
.b-r-success
.b-t-danger
.b-b-danger
.b-l-danger
.b-r-danger
.b-t-warning
.b-b-warning
.b-l-warning
.b-r-warning
.b-t-info
.b-b-info
.b-l-info
.b-r-info
.b-t-dark
.b-b-dark
.b-l-dark
.b-r-dark
.b-t-light
.b-b-light
.b-l-light
.b-r-light

Images Sizes

Use the width and height of images class like:.img-* , .img-h-*.

img-size-30img-size-40img-size-50img-size-60img-size-70img-size-80img-size-90img-size-100

Font Style

Use the font-style like:.f-s-*[normal/italic/oblique/initial/inherit].

This is a .f-s-normal font-style

This is a .f-s-italic font-style

This is a .f-s-oblique font-style

This is a .f-s-initial font-style

This is a .f-s-inherit font-style

Font weight

Using, f-w-* class, you can change the font weight.

You can set bolder font weight Heading 1 using f-w-700

You can set bold font weight Heading 2 using f-w-600

You can set medium font weight Heading 3 using f-w-500

You can set normal font weight Heading 4 using f-w-400

You can set light font weight Heading 5 using f-w-300
You can set light font weight Heading 6 using f-w-100

Text Color

You can Give text color by using, font-*Class.

This is Primary text You can archive this adding.font-primary class

This is Secondary text You can archive this adding.font-secondary class

This is Tertiary text You can archive this adding.font-tertiary class

This is Success text You can archive this adding.font-success class

This is Info text You can archive this adding.font-info class

This is Warning text You can archive this adding.font-warning class

This is Danger text You can archive this adding.font-danger class

This is Dark text You can archive this adding.font-dark class

Font Size

Use the font-size for.f-* [14/16/18/20/22/24/26/28/30/32/34/36/38/40].

Font-size .f-12
Font-size .f-14
Font-size .f-16
Font-size .f-18
Font-size .f-20
Font-size .f-22
Font-size .f-24
Font-size .f-26
Font-size .f-28
Font-size .f-30
Font-size .f-32
Font-size .f-34
Font-size .f-36
Font-size .f-38
Font-size .f-40
@endsection @section('scripts') @endsection