Style guide for template

Style guide for template

Source: _docs/bootstrap.css, line 48

5 Size & Space

Various button styles. Documentation can be found Here

Source: _docs/bootstrap.css, line 8944

5.1 Sizing

Margins variation documentation can be found Here

Source: _docs/bootstrap.css, line 8951

5.1.1 Width & Height

Relative to the parent
Property : {property}

Width
.w-{screen-size}-{value}
Max Width
.maxw-{screen-size}-{value}
Height
.h-{screen-size}-{value}
Max Height
.maxh-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • 0

    .{property}-{screen-size}-0

  • 10%

    .{property}-{screen-size}-p10

  • 20%

    .{property}-{screen-size}-p20

  • 25%

    .{property}-{screen-size}-p25

  • 30%

    .{property}-{screen-size}-p30

  • 40%

    .{property}-{screen-size}-p40

  • 50%

    .{property}-{screen-size}-p50

  • 60%

    .{property}-{screen-size}-p60

  • 70%

    .{property}-{screen-size}-p70

  • 75%

    .{property}-{screen-size}-p75

  • 80%

    .{property}-{screen-size}-p80

  • 90%

    .{property}-{screen-size}-p90

  • 100%

    .{property}-{screen-size}-p100

  • 25vh

    .{property}-{screen-size}-v25

  • 50vh

    .{property}-{screen-size}-v50

  • 75vh

    .{property}-{screen-size}-v75

  • 100vh

    .{property}-{screen-size}-v100

  • 5px

    .{property}-{screen-size}-5

  • 10px

    .{property}-{screen-size}-10

  • 15px

    .{property}-{screen-size}-15

  • 20px

    .{property}-{screen-size}-20

  • 25px

    .{property}-{screen-size}-25

  • 30px

    .{property}-{screen-size}-30

  • 35px

    .{property}-{screen-size}-35

  • 40px

    .{property}-{screen-size}-40

  • 45px

    .{property}-{screen-size}-45

  • 50px

    .{property}-{screen-size}-50

  • 55px

    .{property}-{screen-size}-55

  • 60px

    .{property}-{screen-size}-60

  • 65px

    .{property}-{screen-size}-65

  • 70px

    .{property}-{screen-size}-70

  • 75px

    .{property}-{screen-size}-75

  • 80px

    .{property}-{screen-size}-80

  • 85px

    .{property}-{screen-size}-85

  • 90px

    .{property}-{screen-size}-90

  • 95px

    .{property}-{screen-size}-95

  • 100px

    .{property}-{screen-size}-100

  • 120px

    .{property}-{screen-size}-120

  • 140px

    .{property}-{screen-size}-140

  • 160px

    .{property}-{screen-size}-160

  • 180px

    .{property}-{screen-size}-180

  • 200px

    .{property}-{screen-size}-200

  • 220px

    .{property}-{screen-size}-220

  • 240px

    .{property}-{screen-size}-240

  • 260px

    .{property}-{screen-size}-260

  • 280px

    .{property}-{screen-size}-280

  • 300px

    .{property}-{screen-size}-300

  • 350px

    .{property}-{screen-size}-350

  • 400px

    .{property}-{screen-size}-400

  • 450px

    .{property}-{screen-size}-450

  • 500px

    .{property}-{screen-size}-500

  • 550px

    .{property}-{screen-size}-550

  • 600px

    .{property}-{screen-size}-600

  • auto

    .{property}-{screen-size}-auto

  • unset

    .{property}-{screen-size}-unset

Source: _docs/bootstrap.css, line 9019

5.1.2 Viewport Width

Relative to the viewport
Property : {property}

Viewport Width
.vw-{screen-size}-{value}
Viewport Min Width
.min-vw-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • 25vw

    .{property}-{screen-size}-25

  • 33.33vw

    .{property}-{screen-size}-33

  • 50vw

    .{property}-{screen-size}-50

  • 66.66vw

    .{property}-{screen-size}-66

  • 75vw

    .{property}-{screen-size}-75

  • 100vw

    .{property}-{screen-size}-100

Source: _docs/bootstrap.css, line 9038

5.1.3 Viewport Height

Relative to the viewport
Property : {property}

Viewport Min Height
.vh-{screen-size}-{value}
Viewport Height
.min-vh-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • 25vh

    .{property}-{screen-size}-25

  • 33.33vh

    .{property}-{screen-size}-33

  • 50vh

    .{property}-{screen-size}-50

  • 66.66vh

    .{property}-{screen-size}-66

  • 75vh

    .{property}-{screen-size}-75

  • 100vh

    .{property}-{screen-size}-100

Source: _docs/bootstrap.css, line 9057

5.2 Spacing

Margins variation documentation can be found Here

Source: _docs/bootstrap.css, line 9064

5.2.1 Margins

Margins variation documentation can be found Here
Property : {property}

Margin all
.m-{screen-size}-{value}
Margin horizontal
.mx-{screen-size}-{value}
Margin vertical
.my-{screen-size}-{value}
Margin left
.ms-{screen-size}-{value}
Margin top
.mt-{screen-size}-{value}
Margin right
.me-{screen-size}-{value}
Margin bottom
.mb-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • auto

    .{property}-{screen-size}-auto

  • 0

    .{property}-{screen-size}-0

  • 10%

    .{property}-{screen-size}-p10

  • 20%

    .{property}-{screen-size}-p20

  • 25%

    .{property}-{screen-size}-p25

  • 30%

    .{property}-{screen-size}-p30

  • 40%

    .{property}-{screen-size}-p40

  • 50%

    .{property}-{screen-size}-p50

  • 60%

    .{property}-{screen-size}-p60

  • 70%

    .{property}-{screen-size}-p70

  • 75%

    .{property}-{screen-size}-p75

  • 80%

    .{property}-{screen-size}-p80

  • 90%

    .{property}-{screen-size}-p90

  • 100%

    .{property}-{screen-size}-p100

  • 1px

    .{property}-{screen-size}-1

  • 2px

    .{property}-{screen-size}-2

  • 3px

    .{property}-{screen-size}-3

  • 4px

    .{property}-{screen-size}-4

  • 5px

    .{property}-{screen-size}-5

  • 6px

    .{property}-{screen-size}-6

  • 7px

    .{property}-{screen-size}-7

  • 8px

    .{property}-{screen-size}-8

  • 9px

    .{property}-{screen-size}-9

  • 10px

    .{property}-{screen-size}-10

  • 15px

    .{property}-{screen-size}-15

  • 20px

    .{property}-{screen-size}-20

  • 25px

    .{property}-{screen-size}-25

  • 30px

    .{property}-{screen-size}-30

  • 35px

    .{property}-{screen-size}-35

  • 40px

    .{property}-{screen-size}-40

  • 45px

    .{property}-{screen-size}-45

  • 50px

    .{property}-{screen-size}-50

  • 60px

    .{property}-{screen-size}-60

  • 70px

    .{property}-{screen-size}-70

  • 80px

    .{property}-{screen-size}-80

  • 90px

    .{property}-{screen-size}-90

  • 100px

    .{property}-{screen-size}-100

  • 110px

    .{property}-{screen-size}-110

  • 120px

    .{property}-{screen-size}-120

  • 130px

    .{property}-{screen-size}-130

  • 140px

    .{property}-{screen-size}-140

  • 150px

    .{property}-{screen-size}-150

  • 160px

    .{property}-{screen-size}-160

  • 170px

    .{property}-{screen-size}-170

  • 180px

    .{property}-{screen-size}-180

  • 190px

    .{property}-{screen-size}-190

  • 200px

    .{property}-{screen-size}-200

Source: _docs/bootstrap.css, line 9122

5.2.2 Margins Negative

Margins variation documentation can be found Here
Property : {property}

negative margin all
.m-n-{screen-size}-{value}
negative margin horizontal
.mx-n-{screen-size}-{value}
negative margin vertical
.my-{screen-size}-{value}
negative margin left
.ms-{screen-size}-{value}
negative margin top
.mt-{screen-size}-{value}
negative margin right
.me-{screen-size}-{value}
negative margin bottom
.mb-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • 0

    .{property}-{screen-size}-0

  • 10%

    .{property}-{screen-size}-p10

  • 20%

    .{property}-{screen-size}-p20

  • 25%

    .{property}-{screen-size}-p25

  • 30%

    .{property}-{screen-size}-p30

  • 40%

    .{property}-{screen-size}-p40

  • 50%

    .{property}-{screen-size}-p50

  • 60%

    .{property}-{screen-size}-p60

  • 70%

    .{property}-{screen-size}-p70

  • 75%

    .{property}-{screen-size}-p75

  • 80%

    .{property}-{screen-size}-p80

  • 90%

    .{property}-{screen-size}-p90

  • 100%

    .{property}-{screen-size}-p100

  • 1px

    .{property}-{screen-size}-1

  • 2px

    .{property}-{screen-size}-2

  • 3px

    .{property}-{screen-size}-3

  • 4px

    .{property}-{screen-size}-4

  • 5px

    .{property}-{screen-size}-5

  • 6px

    .{property}-{screen-size}-6

  • 7px

    .{property}-{screen-size}-7

  • 8px

    .{property}-{screen-size}-8

  • 9px

    .{property}-{screen-size}-9

  • 10px

    .{property}-{screen-size}-10

  • 15px

    .{property}-{screen-size}-15

  • 20px

    .{property}-{screen-size}-20

  • 25px

    .{property}-{screen-size}-25

  • 30px

    .{property}-{screen-size}-30

  • 35px

    .{property}-{screen-size}-35

  • 40px

    .{property}-{screen-size}-40

  • 45px

    .{property}-{screen-size}-45

  • 50px

    .{property}-{screen-size}-50

  • 60px

    .{property}-{screen-size}-60

  • 70px

    .{property}-{screen-size}-70

  • 80px

    .{property}-{screen-size}-80

  • 90px

    .{property}-{screen-size}-90

  • 100px

    .{property}-{screen-size}-100

  • 110px

    .{property}-{screen-size}-110

  • 120px

    .{property}-{screen-size}-120

  • 130px

    .{property}-{screen-size}-130

  • 140px

    .{property}-{screen-size}-140

  • 150px

    .{property}-{screen-size}-150

  • 160px

    .{property}-{screen-size}-160

  • 170px

    .{property}-{screen-size}-170

  • 180px

    .{property}-{screen-size}-180

  • 190px

    .{property}-{screen-size}-190

  • 200px

    .{property}-{screen-size}-200

Source: _docs/bootstrap.css, line 9179

5.2.3 Paddings

Paddings variation documentation can be found Here
Property : {property}

Padding all
.p-{screen-size}-{value}
Padding horizontal
.px-{screen-size}-{value}
Padding vertical
.py-{screen-size}-{value}
Padding left
.ps-{screen-size}-{value}
Padding top
.pt-{screen-size}-{value}
Padding right
.pe-{screen-size}-{value}
Padding bottom
.pb-{screen-size}-{value}

Screen sizes : -{screen-size}

sm
.{property}-sm-{value}
md
.{property}-md-{value}
lg
.{property}-lg-{value}
xl
.{property}-xl-{value}
xxl
.{property}-xxl-{value}

Value : -{value}

  • 0

    .{property}-{screen-size}-0

  • 10%

    .{property}-{screen-size}-p10

  • 20%

    .{property}-{screen-size}-p20

  • 25%

    .{property}-{screen-size}-p25

  • 30%

    .{property}-{screen-size}-p30

  • 40%

    .{property}-{screen-size}-p40

  • 50%

    .{property}-{screen-size}-p50

  • 60%

    .{property}-{screen-size}-p60

  • 70%

    .{property}-{screen-size}-p70

  • 75%

    .{property}-{screen-size}-p75

  • 80%

    .{property}-{screen-size}-p80

  • 90%

    .{property}-{screen-size}-p90

  • 100%

    .{property}-{screen-size}-p100

  • 1px

    .{property}-{screen-size}-1

  • 2px

    .{property}-{screen-size}-2

  • 3px

    .{property}-{screen-size}-3

  • 4px

    .{property}-{screen-size}-4

  • 5px

    .{property}-{screen-size}-5

  • 6px

    .{property}-{screen-size}-6

  • 7px

    .{property}-{screen-size}-7

  • 8px

    .{property}-{screen-size}-8

  • 9px

    .{property}-{screen-size}-9

  • 10px

    .{property}-{screen-size}-10

  • 15px

    .{property}-{screen-size}-15

  • 20px

    .{property}-{screen-size}-20

  • 25px

    .{property}-{screen-size}-25

  • 30px

    .{property}-{screen-size}-30

  • 35px

    .{property}-{screen-size}-35

  • 40px

    .{property}-{screen-size}-40

  • 45px

    .{property}-{screen-size}-45

  • 50px

    .{property}-{screen-size}-50

  • 60px

    .{property}-{screen-size}-60

  • 70px

    .{property}-{screen-size}-70

  • 80px

    .{property}-{screen-size}-80

  • 90px

    .{property}-{screen-size}-90

  • 100px

    .{property}-{screen-size}-100

  • 110px

    .{property}-{screen-size}-110

  • 120px

    .{property}-{screen-size}-120

  • 130px

    .{property}-{screen-size}-130

  • 140px

    .{property}-{screen-size}-140

  • 150px

    .{property}-{screen-size}-150

  • 160px

    .{property}-{screen-size}-160

  • 170px

    .{property}-{screen-size}-170

  • 180px

    .{property}-{screen-size}-180

  • 190px

    .{property}-{screen-size}-190

  • 200px

    .{property}-{screen-size}-200