How do I get the width of a column in a bootstrap grid? I can't get the code to return a value like the number of px. Also, I expect the number to change when I resize my browser.

var width = document.getElementById("answer");
var unit = document.getElementsByClassName("col-3");

var x = unit.width;

width.textContent = x;

.col-3 {
  height:100px;
}

#a {
  background: red;
}

#b {
  background:blue;
}

<link rel="stylesheet" href=".0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="a">Width:<span id="answer">0</span></div>
    <div class="col-3" id="b"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

<script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src=".0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

How do I get the width of a column in a bootstrap grid? I can't get the code to return a value like the number of px. Also, I expect the number to change when I resize my browser.

var width = document.getElementById("answer");
var unit = document.getElementsByClassName("col-3");

var x = unit.width;

width.textContent = x;

.col-3 {
  height:100px;
}

#a {
  background: red;
}

#b {
  background:blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="a">Width:<span id="answer">0</span></div>
    <div class="col-3" id="b"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

• javascript
• bootstrap-4

Share Improve this question Follow asked Jun 20, 2018 at 23:17 jennyjenny 19122 gold badges33 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need get first-child col-3 in row, because col-3 after first-child width:0

$(document).ready(function(){

  var unit = $(".col-3:first-child").width();
  var width = $("#answer").text(unit);
  
});

.col-3 {
  height:100px;
}

#a {
  background: red;
}

#b {
  background:blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="a">Width:<span id="answer">0</span></div>
    <div class="col-3" id="b"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>