CODEWITHSUNDEEP
htmlcss
megha
megha

Reputation: 11

chrome not taking max-width of columns "col-lg-9"

chrome is not taking max-width of "col-lg-3" and "col-lg-9" and taking width 100%.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<table class="col-12 form_one">
  <tr>
    <td class="col-lg-3 col-md-3 col-sm-3">
      <h4>Project Information</h4>
    </td>
    <td class="col-lg-9 col-sm-9 col-md-9">
      <h4>Project Text .....</h4>
    </td>
  <tr>
</table>
</body>

Upvotes: 1

Views: 295

Answers (1)

Fabio Vella
Fabio Vella

Reputation: 434

Why do you want to use a table and a grid system at the same time?

I would suggest you either use a table (which a would never recommend for layout purposes) or a grid system with more semantically appropriate elements like:

<section class="row">
  <div class="col-lg-3 col-md-3 col-sm-3">
    <h4>Project Information</h4>
  </div>
  <div class="col-lg-9 col-sm-9 col-md-9">
    <h4>Project Text .....</h4>
  </div>
</section>

Also notice how you forgot to wrap your columns in a .row element.

See this on Codepen

I hope it helped :)

Upvotes: 1

Related Questions