CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Miguel Betancourt
Miguel Betancourt

Reputation: 1

How do I change the width of a grid on bootstrap?

I want to change the width of the columns but I'm not really sure how to do it. I've tried a lot of things but they seem not to be working. Here is my code 

.left-box {
    background-color: green;
    width: 20%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-xs-6 col-md-4" id="left-box">
        <h6>About me</h6>
    </div>
    <div class="col-xs-6 col-md-4">
        <h6>About me</h6>
    </div>
    <div class="col-xs-6 col-md-4">
        <h6>About me</h6>
    </div>
</div>

Upvotes: 0

Views: 71

Answers (2)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

If you are using ID it should call as #Example in css, if it is a class, it should call as .Example.

But you can handle the column widths from bootstrap grid as well. Check the following documentation for bootstrap 3.3 if you are using it.

https://getbootstrap.com/docs/3.3/css/#grid

If it is bootstrap 4, https://getbootstrap.com/docs/4.0/layout/grid/

#left-box {
  width: 50%;
  background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-6 col-md-4" id="left-box">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
</div>

Upvotes: 1

Nicolas M. Pardo
Nicolas M. Pardo

Reputation: 762

The bootstrap system works based on it's classes, being col-*-6 => width 50%, since it's half of the 12 possible columns.

If you want a 20%ish column you can use <div class="col-xs-2"></div>

Read more about how works the grid system: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Upvotes: 0

Related Questions