How to set a column with adjustable size inside the container

Question

<div class="container" style="background: yellow;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" >
          <div class="panel panel-primary">
              <div class="panel-heading">

              </div>
              <div class="panel-body"></div>
          </div>
        </div>
    </div>
</div>

This is the best way to set a customizable width within a container?

<div class="col-md-8 col-md-offset-2" >

Answer 1

Using the columns you set the width using the bootstrap grid.

If this width is good for you use it. Otherwise adjust to the desired size.

You can also set a fixed width with width, but it is better to use the columns as they are adjustable.

Answer 2

Everything depends on the final product you want, it is quite relative... If you want to please every screen size, I suggest using only class="col-8" this way it will work for all types of screens, xl, lg, md, sm, xm...

The way you did, you are specifying the size only for medium sized monitors. But like I said, it depends on your need! If the focus of the site is this, it is very correct, otherwise, up there this my suggestion!

Both ways you’re making a responsive site, which is great nowadays, since many people access the sites by mobile, computer or even televisions...

Hug, congratulations on the project, any doubt I’m available!

Answer 3

The bootstrap breaks down into 12 divisions by screen percentage. Through the col-x you say how many parts your column should occupy.

col-lg-x, col-md-x, col-sm-x,

are specifications as per screen size... lg>md>sm

• x is the number of parts (out of 12) your column should occupy.