CODEWITHSUNDEEP
csstwitter-bootstrapfrontend
Winston
Winston

Reputation: 1428

How to format the bootstrap form label to match the width of the form input?

I am using bootstrap to build the form. Based on the default styling I could get the form label and input as follows:

enter image description here

Using the code below:

<div class="container">
  <div class="row">
    <form>
      <div class="form-row">
        <div class="form-group col">
          <label for="alert">Alert</label>
          <input type="text" class="form-control" placeholder="Alert" id="alert" name="alert">
        </div>
      </div>
    </form>
  </div>  
</div>

However I would like to put a background color on the label like screenshot below (The following screenshot was done using table tr and td):

enter image description here

Since I am using external form validation script, which works best with label, therefore I would prefer not using the table. However I tried playing with the CSS but I have problem formatting the header?

Thanks in advance

Upvotes: 0

Views: 57

Answers (1)

Ahmed Ali
Ahmed Ali

Reputation: 1966

It can be done using card in Bootstrap. Working example below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card" style="width:18em">
  <div class="card-header bg-success text-white">
    <center><label for="alert">Alert</label></center>
  </div>
  <div class="card-body">

          <input type="text" class="form-control" placeholder="Alert" id="alert" name="alert"></p>
  </div>
</div>

Upvotes: 1

Related Questions