- Bootstrap 4:Responsive Web Design
- Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
- 258字
- 2021-07-09 18:54:46
Making an input grouping
As we discussed in the last chapter, it is possible to group components together with inputs, as we did to the sign form in the home page. However, it is possible to add even more things to inputs. We will talk about some group options that can be useful.
First of all, let's exemplify the usage of grouping inputs and buttons. The main idea is almost the same—creating a div.input-group
, and creating an input and a button inside this element, as shown in this HTML code:
<div class="input-group"> <input type="text" class="form-control" placeholder="Type the page title..."> <span class="input-group-btn"> <button class="btn btn-success" type="button">Search</button> </span> </div>
The output of the preceding code is shown in the following screenshot:

The only trick here is to add a <span>
element wrapping the button. If you invert the input order with the button, you will prepend the button to the input:
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-success" type="button">Search</button> </span> <input type="text" class="form-control" placeholder="Type the page title..."> </div>
The output of the preceding code is shown in this screenshot:

Bootstrap also gives us the possibility to add any other kind of button. To exemplify this, let's now add a button dropdown grouped with an input. Replace <button>
with the button dropdown that we just used in the previous example:
<div class="input-group"> <span class="input-group-btn"> <div class="btn-group pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Customer area <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </span> <input type="text" class="form-control" placeholder="Type the page title..."> </div>
It is pretty simple; you can add almost any kind of button, prepended or appended in an input. The following screenshot shows the result of the previous HTML code:

- Python程序設計教程(第2版)
- Android Studio Essentials
- CentOS 7 Linux Server Cookbook(Second Edition)
- C語言程序設計基礎與實驗指導
- Apache Spark 2 for Beginners
- Learning Laravel 4 Application Development
- JS全書:JavaScript Web前端開發指南
- 大學計算機基礎(第2版)(微課版)
- RealSenseTM互動開發實戰
- uni-app跨平臺開發與應用從入門到實踐
- Struts 2.x權威指南
- Visual C++程序設計與項目實踐
- Access數據庫應用教程(2010版)
- JavaScript語法簡明手冊
- Unity與C++網絡游戲開發實戰:基于VR、AI與分布式架構