-1

All OK: http://prntscr.com/iqo8f7

When I make width smaller: http://prntscr.com/iqo8nj

My button on the right is not responsive. It's ok if the width is big, otherwise it doesn't seem to resize correctly.

Any idea why?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-11">
    <h5 class="inline" style="vertical-align: sub"> Status: </h5>
    <span class="label label-warning label-lg-status">In Progress</span>
    <hr>
  </div>
  <div class="col-sm-1">
    <button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
  </div>
</div>
  • 1
    Seems to work in the snippet you posted. Also, [rows must be within a container](https://getbootstrap.com/docs/3.3/css/#grid). – j08691 Mar 13 '18 at 16:07
  • There's nothing telling the button to resize. You're controlling the div, not the button. Look into [@media css](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) for more information on adjustments based on screen size. – heb-NR Mar 13 '18 at 16:08
  • Use `col-xs-*` if you don't want the columns to stack. – Carol Skelly Mar 13 '18 at 16:20

1 Answers1

0

The main issue comes from the bootstrap column settings needed. If you follow the doc, you have to set all your <div class="row"> inside a <div class="container"> or a <div class="container-fluid">

so if you do the good way it's working well : 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-11">
        <h5 class="inline" style="vertical-align: sub"> Status: </h5>
        <span class="label label-warning label-lg-status">In Progress</span>
        <hr>
      </div>
      <div class="col-sm-1">
        <button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
      </div>
    </div>
</div>
kevinniel
  • 1,088
  • 1
  • 6
  • 14