Home / Questions / 236244
Accepted
Javier
Asked: 2020-02-08 20:22:05 +0800 CST 2020-02-08 20:22:05 +0800 CST

Bootstrap 4.0 w-lg-1000

  • 772

Hello Good Evening, how to vary the width of a div depending on the device:

use : w-lg-80 w-md-60 w-sm-100 but it doesn't work.

For example:

<div class="container w-lg-60">

<div class="row" style="background-color:#C2F8F7">



<div class="col-sm-12 col-md-12 col-lg-12" style="border:1px solid">


<div class="d-flex justify-content-center">
<b>Registro de Clientes</b> 
</div>

<div class="d-flex justify-content-center">
<img src="img/registro_cliente.png">    
</div>
html

2 Answers

  1. Best Answer

    To vary depending on the device you would have to create the columns with .col-sm/md/lg/xlsince the .w-25/50/75/100only thing they do is define that the element will have a width of 25% / 50% / 75% / 100% on any type of device .

    How are the column measurements different?

    .col-This class is for devices that have a screen that is less than 576px wide.

    .col-smThis is for devices with screens 576 or more px wide

    .col-mdThis is for devices with screens that are 768 or more px wide.

    .col-lgworks for devices with screens that are 992 or more px wide

    .col-xlworks for devices with screens 1200 px or more wide

    How does grid systemBootstrap work?

    Bootstrap's grid system can be divided into 12 columns per line ( .row).

    An example of how it works:

    span {
  text-align: center;
}

p {
  background: red;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
    <span class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"> <p> 1 </p> </span>
  </div>
  <div class="row">
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
    <span class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> <p> 2 </p> </span>
  </div>
  <div class="row">
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
  </div>
  <div class="row">
    <span class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <p> 4 </p> </span>
    <span class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <p> 4 </p> </span>
    <span class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <p> 4 </p> </span>
  </div>
  <div class="row">
    <span class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"> <p> 6 </p> </span>
    <span class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"> <p> 6 </p> </span>
  </div>
  <div class="row">
    <span class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <p> 12 </p> </span>
  </div>
</div>

    As you can see, each .rowcontains internal columns that add up to a value of 12. In this case, I always used the same "measures" to show you how it works, but it could also work like this:

    To see the difference use the 'full screen' button and play with the size of the browser

    p {
  background: red;
  text-align: center;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
    <span class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"> <p> 6 </p> </span>
    <span class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <p> 3 </p> </span>
  </div>
  <div class="row">
    <span class="col-3 col-sm-6 col-md-3 col-lg-7 col-xl-5"> <p> &nbsp; </p> </span>
    <span class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-5"> <p> &nbsp; </p> </span>
    <span class="col-3 col-sm-3 col-md-6 col-lg-2 col-xl-2"> <p> &nbsp; </p> </span>
  </div>
</div>

    As you can see, the sum of the columns is always 12 .

    I hope it helps you to understand what you should do to solve your problem.

    PS: the columns do not always have to have the same value for each device, that is, you could also do something like this: <div class='col-sm-3 col-lg-6'> </div>with this, the size of the element changes based on the device

    successes.

    • 3

  2. Friend, use media queries depending on the size of the device, assign the damage you want to the divs, it is the best option and fully responsive.

    // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

    • 0