GSC-Bootsrapp tiene 7 colores más que Bootstrap 4.
Estos colores se heredan a su vez a los badges, backgrounds y alerts.
Más clases css para colores https://getbootstrap.com/docs/4.6/utilities/colors/
Clases para height
.h-10px.h-20px.h-30px.h-40px.h-50px.h-60px.h-70px.h-80px.h-90px.h-100px.h-110px.h-120px.h-130px.h-140px.h-150px.h-160px.h-170px.h-180px.h-190px.h-200px.h-210px.h-220px.h-230px.h-240px.h-250px.h-260px.h-270px.h-280px.h-290px.h-300px.h-310px.h-320px.h-330px.h-340px.h-350px.h-360px.h-370px.h-380px.h-390px.h-400px.h-40px.h-420px.h-430px.h-440px.h-450px.h-460px.h-470px.h-480px.h-490px.h-500px.position-relative.position-absoluteMás clases css para position https://getbootstrap.com/docs/4.6/utilities/position/
.top-0px.top-10px.top-20px.top-30px.top-40px.top-50px.top-60px.top-70px.top-80px.top-90px.top-100px.bottom-0px.bottom-10px.bottom-20px.bottom-30px.bottom-40px.bottom-50px.bottom-60px.bottom-70px.bottom-80px.bottom-90px.bottom-100px.left-0px.left-10px.left-20px.left-30px.left-40px.left-50px.left-60px.left-70px.left-80px.left-90px.left-100px.rigth-0px.rigth-10px.rigth-20px.rigth-30px.rigth-40px.rigth-50px.rigth-60px.rigth-70px.rigth-80px.rigth-90px.rigth-100pxfont-size: 2.5rem;
font-size: 2rem;
font-size: 1.75rem;
font-size: 1.5rem;
font-size: 1.25rem;
font-size: 1rem;
.line-heigth-1
.line-heigth-2
.line-heigth-3
.line-heigth-4
.line-heigth-5
.line-heigth-6
.line-heigth-7
.line-heigth-8
.line-heigth-9
.line-heigth-10
0.5rem
1rem
1.5rem
2.rem
2.5rem
3rem
3.5rem
4rem
4.5rem
5rem
Más clases css para textos https://getbootstrap.com/docs/4.6/utilities/text/
sm:576pxmd:768pxlg:992pxxl:1200pxPara dar a un contenedor un un display-grid, use la clase css .grid-container.
Para hacer que el contendor con display grid tenga una cuadricula autoajustable use la clase css .max-content-in-vw en el mismo div en que se puso .grid-container
.grid-place-items
.grid-place-items{
width: 100%;
height: 100%;
display: grid;
place-items: center;
color:white;
span{
padding:5px;
color:#000
}
}
Para añadir columnas a su contenedor grid use las clases css .grid-col-n°.
Estas clases usan la regla css grid-template-columns: repeat(n°,1fr); tomando n° un valor entre 1 a 12.
.grid-col-1.grid-col-2.grid-col-3.grid-col-4.grid-col-5.grid-col-6.grid-col-7.grid-col-8.grid-col-9.grid-col-10.grid-col-11.grid-col-12.grid-col-sm-1.grid-col-sm-2.grid-col-sm-3.grid-col-sm-4.grid-col-sm-5.grid-col-sm-6.grid-col-sm-7.grid-col-sm-8.grid-col-sm-9.grid-col-sm-10.grid-col-sm-11.grid-col-sm-12.grid-col-md-1.grid-col-md-2.grid-col-md-3.grid-col-md-4.grid-col-md-5.grid-col-md-6.grid-col-md-7.grid-col-md-8.grid-col-md-9.grid-col-md-10.grid-col-md-11.grid-col-md-12.grid-col-lg-1.grid-col-lg-2.grid-col-lg-3.grid-col-lg-4.grid-col-lg-5.grid-col-lg-6.grid-col-lg-7.grid-col-lg-8.grid-col-lg-9.grid-col-lg-10.grid-col-lg-11.grid-col-lg-12.grid-span-1.grid-span-2.grid-span-3.grid-span-4.grid-span-5.grid-span-6.grid-span-7.grid-span-8.grid-span-9.grid-span-10.grid-span-11.grid-span-12.grid-span-sm-1.grid-span-sm-2.grid-span-sm-3.grid-span-sm-4.grid-span-sm-5.grid-span-sm-6.grid-span-sm-7.grid-span-sm-8.grid-span-sm-9.grid-span-sm-10.grid-span-sm-11.grid-span-sm-12.grid-span-md-1.grid-span-md-2.grid-span-md-3.grid-span-md-4.grid-span-md-5.grid-span-md-6.grid-span-md-7.grid-span-md-8.grid-span-md-9.grid-span-md-10.grid-span-md-11.grid-span-md-12.grid-span-lg-1.grid-span-lg-2.grid-span-lg-3.grid-span-lg-4.grid-span-lg-5.grid-span-lg-6.grid-span-lg-7.grid-span-lg-8.grid-span-lg-9.grid-span-lg-10.grid-span-lg-11.grid-span-lg-12Por defecto la clase css .grid-container tiene un min-heigth:100px;.
Para asignar filas al contenedor-grid pude usar la classe css .grid-row-a°-of-b°.
Dónde el numero a° puede tomar un valor entre 1 - 10 que el numero de veces que se repite el numero b°.
Dónde el numero b° pude tomar un valor entre 50 y 500 de 50 en 50 y representa el el alto de cada cuadricula.
.grid-row-1-of-50px.grid-row-2-of-50px.grid-row-3-of-50px.grid-row-4-of-50px.grid-row-5-of-50px.grid-row-6-of-50px.grid-row-7-of-50px.grid-row-8-of-50px.grid-row-9-of-50px.grid-row-10-of-50px.grid-row-1-of-100px.grid-row-2-of-100px.grid-row-3-of-100px.grid-row-4-of-100px.grid-row-5-of-100px.grid-row-6-of-100px.grid-row-7-of-100px.grid-row-8-of-100px.grid-row-9-of-100px.grid-row-10-of-100px.grid-row-1-of-150px.grid-row-2-of-150px.grid-row-3-of-150px.grid-row-4-of-150px.grid-row-5-of-150px.grid-row-6-of-150px.grid-row-7-of-150px.grid-row-8-of-150px.grid-row-9-of-150px.grid-row-10-of-150px.grid-row-1-of-200px.grid-row-2-of-200px.grid-row-3-of-200px.grid-row-4-of-200px.grid-row-5-of-200px.grid-row-6-of-200px.grid-row-7-of-200px.grid-row-8-of-200px.grid-row-9-of-200px.grid-row-10-of-200px.grid-row-1-of-250px.grid-row-2-of-250px.grid-row-3-of-250px.grid-row-4-of-250px.grid-row-5-of-250px.grid-row-6-of-250px.grid-row-7-of-250px.grid-row-8-of-250px.grid-row-9-of-250px.grid-row-10-of-250px.grid-row-1-of-300px.grid-row-2-of-300px.grid-row-3-of-300px.grid-row-4-of-300px.grid-row-5-of-300px.grid-row-6-of-300px.grid-row-7-of-300px.grid-row-8-of-300px.grid-row-9-of-300px.grid-row-10-of-300px.grid-row-1-of-350.grid-row-2-of-350.grid-row-3-of-350.grid-row-4-of-350.grid-row-5-of-350.grid-row-6-of-350.grid-row-7-of-350.grid-row-8-of-350.grid-row-9-of-350.grid-row-10-of-350.grid-row-1-of-400px.grid-row-2-of-400px.grid-row-3-of-400px.grid-row-4-of-400px.grid-row-5-of-400px.grid-row-6-of-400px.grid-row-7-of-400px.grid-row-8-of-400px.grid-row-9-of-400px.grid-row-10-of-400px.grid-row-1-of-450px.grid-row-2-of-450px.grid-row-3-of-450px.grid-row-4-of-450px.grid-row-5-of-450px.grid-row-6-of-450px.grid-row-7-of-450px.grid-row-8-of-450px.grid-row-9-of-450px.grid-row-10-of-450px.grid-row-1-of-500px.grid-row-2-of-500px.grid-row-3-of-500px.grid-row-4-of-500px.grid-row-5-of-500px.grid-row-6-of-500px.grid-row-7-of-500px.grid-row-8-of-500px.grid-row-9-of-500px.grid-row-10-of-500px
.pre-square { background-color: #1b3246; }
.pre-square code { color:greenyellow;}
.pre-square code span { color:white;}
.img-cover.img-containoverflow-hiddenshadow-insetEsta clase se aplica a la etiqueta html
<html class ="smoth-scroll">
GSC Bootstrap agrega dos tipos de fuentes
.font-openSans.font-robotoSlab.fw-200.fw-500.fw-800.fw-400.fw-400-italic.fw-700.fw-700-italic