Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to place two input box next to each other using Bootstrap 4?
Bootstrap is a popular frontend framework containing pre-styled components and allowing developers to use that directly in the application. The ‘4’ is the version of the Bootstrap.
Bootstrap also contains pre-styled input components. Furthermore, it has different kinds of the input components, such as input groups, single input, etc.
While creating a form, if we require to add 10s of inputs in the form, we can put some input fields side by side, such as first name and last name we can put side by side.
In this tutorial, we will use Bootstrap to place two input boxes next to each other.
Syntax
Users can follow the syntax below to place two input boxes next to each other using Bootstrap 4.
<div class="input-group"> <input type="text" class="form-control"> <input type="text" class="form-control"> </div>
In the above syntax, we used the ‘input-group’ class with the div element to put all input elements side by side, which is inside the div element.
Example 1
In the example below, we added the CDN of Bootstrap inside the ‘head’ section of the HTML code.
We added the div element containing the ‘input-group’ class name in HTML. In the div element, we defined another div element containing the class name equal to the ‘input-group-prepend’ and added the combined label for both input elements.
Next, we added two input elements inside the div element. In the output, users can observe the two combined elements.
<html>
<head>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br>
<div class = "input-group" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id=""> Username and password </span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script>
</body>
</html>
Example 2
In this example, we demonstrated to change the dimensions of the combined input field. We can use the style attribute to change the width of input elements. Also, we used the ‘input-group-lg’ and ‘input-group-lg’ class names with the parent div element to change the height of the Bootstrap input.
In the output, we can see the input elements of different sizes.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br>
<div class = "input-group input-group-lg" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id = "">Username and password</span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div> <br>
<div class = "input-group input-group-sm" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id = "">Email and password</span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script>
</body>
</html>
We learned to use the input component of Bootstrap in this tutorial. We can use the ‘input-group’ class with the div element to combine the input element, which we place inside the div element.
Also, we learned to change the size of the combined input elements in the second example.
210 Views
