Add styles to bootstrap forms

Viewed 80

I have selection form on Bootstrap, I need to add styles and make it like on this image below. Please check below html and css for this image form:

image

form html on image:

<form method="POST" action="/identify">  
  <div class="wrap">
     <div class="search">
        <input type="text" id="value"  multiple="multiple" class="searchTerm" name="value" placeholder="Type your values">
        <datalist id="val">
            <option value="val">val</option>
        </datalist>
        <button type="submit" class="searchButton" name=form>
          <i class="fa fa-search"></i>
        </button>
     </div>
  </div><br>
</form>

form css on image:

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 50px;
  border-radius: 0;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 60px;
  height: 66px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.wrap{
  display: none;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}

my bootstrap selection form code:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

      <section>
        <div class="container h-100">
  <div class="wrap">
     <div class="search">
          <form action="/action" method="POST" class="form-inline">
            <select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
              <option value="value">value</option>
              <option value="value">value</option>
              <option value="value">value</option>
            </select>
            <button type="submit" class="btn btn-primary mb-2">Select</button>
          </form>
</div>
</div>
          <script type="text/javascript">
            $('select').selectpicker();
          </script>
        </div>
      </section>

I have added styles for the form on the image. But how to make it to my select form?

1 Answers

All you must do is delete everything in between the <div> tags which are right inside you <section> tags. I believe it should look like this.

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
 <section>
        <div class="container h-100">
  <div class="wrap">
     <div class="search">
          <form action="/action" method="POST" class="form-inline">
            <select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
              <option value="value">value</option>
              <option value="value">value</option>
              <option value="value">value</option>
            </select>
            <button type="submit" class="btn btn-primary mb-2">Select</button>
          </form>
</div>
</div>
          <script type="text/javascript">
            $('select').selectpicker();
          </script>
        </div>
      </section>
        </div>
      </section>
Related