How to take width of div when minimize screen - Bootstrap

Question

I have the following code:

<div class="col-md-1" style="margin-right: -15px; width:200px">
</div>

However as I am working with bootstrap I wanted to remove this width in case my screen gets smaller, so my div does not get fixed size, someone knows how I can be doing this?

Answer 1

Try to use the bootstrap grid system see here, using it you don’t have to worry about the width and height of the components you are using, not to mention that your website is responsive.

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

If you do not know or do not 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 developing together with Reactjs, but ignore this detail 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 elements within the grid, and it is possible to create infinite grids.

In this example of mine, I tested different sizes of the 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 the user is accessing, in this case the computer, tablet or mobile phone, in that order.

Answer 2

Use the bootstrap’s own grid:

col-Xs-"and a number up to 12" use class Xs for mobile guidance

col-Sm-"and a number up to 12" use class Sm for guidance on tablets

col-Md-"and a number up to 12" use class Md for guidance on small desktops

col-lg-"and a number up to 12" use the lg class for guidance 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 other objects that are inside your main div always keeping in mind that to stay in line and their sizes are relative to the class type and the chosen size. If you want them in line keep the sum of all objects with the total of 12, or with the limit you choose in your main div(Remembering that the maximum is 12).

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

Answer 3

You can do this control with jQuery. This code will apply width=100% when the screen is smaller than "200px" and width=200px when equal to or greater than "200px" for all Ivs 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);
});