How To Generate Bootstrap 5 Color Contrast Ratio By Scss In React Project?[#2023]

 

• now here we will learn how we can generate color classes for bootstrap 5 colors like blue and purple in react project.
• first of all, include all the dependence of bootstrap scss in the app.scss file
• then  create color classes by @each method of scss

@each method of scss

// blues
@each $color,$value in $blues {
    .bg-#{$color} {
        background-color: $value !important;
    }

    .text-#{$color} {
        color: $value !important;
    }
}

// Purples
@each $color, $value in $purples {
    .bg-#{$color} {
        background-color: $value !important;
    }

    .text-#{$color} {
        color: $value !important;
    }
}

App.scss full code

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap-utilities';


// blues
@each $color,$value in $blues {
    .bg-#{$color} {
        background-color: $value !important;
    }

    .text-#{$color} {
        color: $value !important;
    }
}

// Purples
@each $color, $value in $purples {
    .bg-#{$color} {
        background-color: $value !important;
    }

    .text-#{$color} {
        color: $value !important;
    }
}

//  main
@import "Main";
@import '~bootstrap/scss/bootstrap';

HTML

<Container>
                  <Row className='row  align-items-md-center'>

                      <Col sm={3}>
                          <div className='content_box '>
                              <h2 className=' text-blue-100' > blue shades</h2>
                              <h2 className=' text-blue-200' > blue shades</h2>
                              <h2 className=' text-blue-300' > blue shades</h2>
                              <h2 className=' text-blue-400' > blue shades</h2>
                              <h2 className=' text-blue-500' > blue shades</h2>
                              <h2 className=' text-blue-600' > blue shades</h2>
                              <h2 className=' text-blue-700' > blue shades</h2>
                              <h2 className=' text-blue-800' > blue shades</h2>
                              <h2 className=' text-blue-900' > blue shades</h2>

                          </div>
                      </Col>

                      <Col sm={3}>
                          <div className='content_box '>
                              <h2 className=' text-purple-100' > purple shades</h2>
                              <h2 className=' text-purple-200' > purple shades</h2>
                              <h2 className=' text-purple-300' > purple shades</h2>
                              <h2 className=' text-purple-400' > purple shades</h2>
                              <h2 className=' text-purple-500' > purple shades</h2>
                              <h2 className=' text-purple-600' > purple shades</h2>
                              <h2 className=' text-purple-700' > purple shades</h2>
                              <h2 className=' text-purple-800' > purple shades</h2>
                              <h2 className=' text-purple-900' > purple shades</h2>


                          </div>
                      </Col>
                  </Row>
              </Container>

 

Result