How to draw div width when minimizing screen - Bootstrap

You can do this control with jQuery. This code will apply width=100% when the screen is less than "200px" and width=200px when it is equal to or greater than "200px" to all divs with class .col-md-1 :

$(window).on('load resize', function(){
   window.innerWidth < 200 ? div_width = '100%' : div_width = '200px';
   $('.col-md-1').css('width',div_width);
});

Try to use the bootstrap grid system see here , using it you do not have to worry about width nor height of the components you are using, not to mention that your site is responsive.

If you use the grid system, avoid breaking library logic, causing item size overflow by inserting the width or height selector.

If you do not know or want to use the grid system, I advise you to use the height and width selectors, always as a percentage.

Example: width:200%

I was recently learning to work with the bootstrap grid and maybe it's a good show here.

This code is in EcmaScript because it was being developed along with ReactJS, but ignore this detail so as not to complicate.

 <header style={cssHeader}>
    <Grid fluid={true} style={cssGrid}>
      <Row style={cssRow}>
        <Col lg={2} md={4} xs={12} style={cssCol}>
          <h1 >  Logo </h1>
        </Col>
        <Col lg={6} md={8} xs={6} style={cssCol}>
          <h1 > Soluções Inteligentes </h1>
        </Col>
        <Col lg={4} md={12} xs={6} style={cssCol}>
          <h1 > XXX</h1>
        </Col>
      </Row>
    </Grid>
  </header>

Note that it is possible to manipulate all the elements within the grid, in addition to being able to create infinite grids.

In my example, I tested different sizes of elements according to the user's screen, so it shows the components logo , Soluções Inteligentes and xxx in different ways depending on the size of the device that the user is accessing, in this case the computer, tablet or cell phone, in that order.

Use the bootstrap grid itself:

col-xs - " and a number up to 12 " use class xs for mobile targeting

col-sm - " and a number up to 12 " use class sm for tablet orientation

col-md - " and a number up to 12 " use md class for orientation on small desktops

col-lg - " and a number up to 12 " use class lg for orientation on medium and large desktops

Examples:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> //crie uma div com o tamanho máximo

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-12>
        <p> Primeiro paragrafo></p>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-12>
        <p> Segundo paragrafo></p>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-12>
        <p> Terceiro paragrafo></p>
    </div>
</div>

Create the remaining objects that are inside your main div always keeping in mind that to remain in line and their sizes are relative to the type of class and size chosen. If you want them online keep the sum of all objects with a total of 12, or with the limit that you choose in your main div ( Remembering the maximum is 12 ).

So your pages will automatically fit the page size. I hope I have helped.