class="form-inline" items on a single line

Programming, development, testing

→

Bootstrap - buttons, menus, dialog, slider ... Containers for placing elements

→

class="form-inline" items on a single line | Bootstrap 4.0

Looked at 4175 times

class="form-inline" items on a single line in the Bootstrap 4.0

last updated: 10 January 2019

Use class="form-inline" to display labels, controls, buttons in a single horizontal row.

Example

Html

<html>

     
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <body>
          
          <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

          
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>

          
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

          
          <form class="form-inline">
               <input type="text" class="form-control mr-sm-2" placeholder="Search">
               <button type="submit" class="btn btn-default">Click me</button>
          </form>

     </body>
</html>

Example we look, we test

← Previous topic
"Navbar" in the Bootstrap 4.0 - this is the main horizontal menu for the site (navigation headers)

Next topic →
class="navbar-expand-lg" disappears if the area size is smaller lg | Bootstrap 4.0