https://github.com/kibria-khandaker/bootstrap-4.4.1
Bootstrap-4.4.1 class information and others information for making template .
https://github.com/kibria-khandaker/bootstrap-4.4.1
Last synced: 3 months ago
JSON representation
Bootstrap-4.4.1 class information and others information for making template .
- Host: GitHub
- URL: https://github.com/kibria-khandaker/bootstrap-4.4.1
- Owner: kibria-khandaker
- Created: 2020-10-03T16:48:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-03T19:20:36.000Z (over 4 years ago)
- Last Synced: 2025-01-26T06:25:18.222Z (5 months ago)
- Size: 352 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bootstrap-4.4.1
Bootstrap-4.4.1 class information and others information for making template .
---
```bash
https://getbootstrap.com/docs/4.4/getting-started/introduction/
https://getbootstrap.com/docs/4.4/layout/overview/
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%
-------------------------------------------------------------------------------
No media query for `xs` since this is the default in Bootstrap,So
@{ xs }Extra small devices( <576px .col ,portrait phones, less than 576px).
@media (min-width: 576px) { sm ≥576px } col-sm-
@media (min-width: 768px) { md ≥768px } col-md-
@media (min-width: 992px) { lg ≥992px } col-lg-
@media (min-width: 1200px){ xl ≥1200px } col-xl- start from .....<
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
Some Class ....
=> container-fluid , no-gutters , col-md-auto ,
=> .px-lg-5,.mx-lg-n5 ,
(.col padding with .px-lg-5, counteracted that with .mx-lg-n5 on the parent
.row and then adjusted the .container wrapper with .px-lg-5.)
-------------------------------------------------------------------------------
// start, center, end
// start, center, end ,around , between
// .order-1.order-md-2.... call number value will priority
- Here 12>1>col will show
{ example 1)col order-last , 2)col , 3)col order-first }
- but result 3) > 2) > 1)
-------------------------------------------------------------------------------
class="col-md-4 offset-md-4" , class="col-md-4 offset-4"
class="col-md-3 ml-md-auto" , class="col-md-4 ml-auto"
class="col-auto mr-auto" , class="col-auto"
class="shadow p-3 mb-5 bg-white rounded"
class="shadow-sm p-3 mb-5 bg-white rounded"
class="shadow-none p-3 mb-5 bg-light rounded"
class="w-25" 25%
class="w-50" 50%
class="w-auto"
class="h-25" 25%
class="h-50" 50%
class="h-auto"
class="mw-100"
class="mh-100"
class="min-vw-100"
class="min-vh-100"
class="vw-100"
class="vh-100"
m -t b l r x y -0....5/auto
p -t b l r x y -0....5/auto
bd-highlight, text-truncate
-------------------------------------------------------------------------------
-Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
-Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
/here All class/- img-fluid, img-thumbnail,rounded mx-auto d-block
< figure class="figure" >
< img src="..." class="figure-img img-fluid rounded" alt="..." >
< figcaption class="figure-caption text-right" >A caption for the above image.< /figcaption >
< /figure >
-------------------------------------------------------------------------------
-Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.
-
Bootstrap
-------------------------------------------------------------------------------
https://getbootstrap.com/docs/4.4/layout/grid/
Use the responsive .row-cols-* classes to quickly set the number of columns
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column 3
Column 3
Column 6
Column 3
Column
Column
Column
Column
-------------------------------------------------------------------------------
Some Icon link :--
1) https://feathericons.com/
2) https://ionicons.com/
3) http://demo.amitjakhu.com/dripicons/
4) https://material.io/resources/icons/?style=outline
5) https://icons8.com/
6) https://github.com/danklammer/bytesize-icons
7) https://fontawesome.com/ _Font Awesome 4.7.0_
-------------------------------------------------------------------------------
```