How to do search box for bootstrap

To create a search box using Bootstrap: Create an input box with type="search". Add a form-control class to the input box. Optional: Add a search button. Optional: Use input-group and input-group-lg or input-group-sm to resize the input box. Optional: Use the placeholder property to add placeholder text. Optional: Use the text-left, text-center, or text-right classes to set the alignment of the input box text.

Create a search box using Bootstrap

How to create a search box using Bootstrap?

The steps to create a search box using Bootstrap are as follows:

1. Create a basic input box

In HTML, use the <input> element to create an input box and add type="search" attribute to it to specify it as the search box:

 <code class="html"><input type="search"></code>

2. Style the input box

To use the Bootstrap style, add form-control class to the input box:

 <code class="html"><input type="search" class="form-control"></code>

3. Add button (optional)

You can add a search button by adding a <button></button> element after the input box:

 <code class="html"><input type="search" class="form-control"> <button type="submit" class="btn btn-primary">搜索</button></code>

4. Resize the input box (optional)

To resize the input box, you can use input-group and input-group-lg or input-group-sm classes:

 <code class="html"><div class="input-group input-group-lg"> <input type="search" class="form-control"> <button type="submit" class="btn btn-primary">搜索</button> </div></code>

5. Add placeholder text (optional)

You can use placeholder property to add placeholder text to the input box:

 <code class="html"><input type="search" class="form-control" placeholder="搜索"></code>

6. Set the input box alignment (optional)

You can set the alignment of input box text by using text-left , text-center or text-right classes:

 <code class="html"><input type="search" class="form-control text-center"></code>

The above is the detailed content of How to do search box for bootstrap. For more information, please follow other related articles on the PHP Chinese website!