Bootstrap 5 Form-Group, Form-Row, Form-Inline Not Working

Bootstrap 5 form-group, form-row, form-inline not working

The reason is form-group, form-row, and form-inline classes have been removed in Bootstrap 5:

Breaking change: Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.

https://getbootstrap.com/docs/5.0/migration/#forms

So Grid and Utilities are supposed to be used instead.

...but if you are looking for a quick solution, here's how these classes were working in Bootstrap 4:

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col {
  padding-left: 5px;
  padding-right: 5px;
}

label {
  margin-bottom: 0.5rem;
}

Bootstrap form inline not working

From Bootstrap reference, for inline forms :

This only applies to forms within viewports that are at least 768px
wide.

and as far as your layout is concerned,

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

its perfectly fine..inline :

working demo

Bootstrap form-inline not working, how can I prevent them from stacking?

You are calling bootstrap v5, and .form-inline is dropped since v5 : https://getbootstrap.com/docs/5.0/migration/#forms-2

You should use .row and .col to build your form layout

<form class="row ms-auto">
  <div class="col">
      <input class="form-control mr-sm-2" type="search">                
  </div>
  <div class="col-auto">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>

You can find everything here : https://getbootstrap.com/docs/5.0/forms/layout/

bootstrap 5 inline form alignment issue

Simply use align-items-end...

<form class="row row-cols-md-auto g-3 align-items-end" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
            <div class="col-sm-7">
                <label class="form-label">ID</label>
                <input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
            </div>
            <div class="col-sm">
                <label class="form-label">CG</label>
                <select class="form-select" name="cardholder_group" value="#cg#" id="cg">
                    <option></option>
                    <cfloop query="qryAllGroups">
                        <option value="#displayname#">#displayname#</option>
                    </cfloop>
                </select>
            </div>
            <div class="col-sm">
                <button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
            </div>
            <div class="col-sm">
                <a href="/views/requests" class="btn btn-secondary">Reset Parameters</a>
            </div>
</form>

Demo

Also, you don't want to have a row directly inside another row. Only columns col* should be placed directly in a row.

Form inline not working as expected with React-Bootstrap

To fix the issue I suggest replacing <Form inline> with <Form className='d-flex'> as it will set the display of that section to flex.

In addition, if you want to set the search to the far right, add style={{position:'absolute',right:'0'}}.

inline form Bootstrap is not working

You have to put your controls into an input-group:

<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="input-group">
    <div class="form-group">
        <div>
            <label for="startDate" >                
                From                
            </label>            
            <input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
        </div>          
    </div>
    <div class="form-group">
        <div>           
            <label for="endDate">               
                To              
            </label>            
            <input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
        </div>
    </div>  
   </div>
</form>

http://jsfiddle.net/3h3NB/3/

EDIT:

Or you can try using grids:

<form>
    <div class="container">
        <div class="row">
            <div class="col-xs-1">
                <label for="startDate">from</lable>
            </div>
            <div class="col-xs-3">
                <input type="text" name="startDate" value="" readonly="readonly" id="startDate"class="datepicker form-control">
            </div>
            <div class="col-xs-1">
                <label for="endDate">to</lable>
            </div>
            <div class="col-xs-3">
                <input type="text" name="endDate" value="" readonly="readonly" id="startDate" class="datepicker form-control">
            </div>
        </div>
    </div>
</form> 

http://jsfiddle.net/3h3NB/76/

Inline form is not working

Use row class to bind your column then it will work
<div class="row">...under this you can use col classes and specify the width ...</div>

Bootstrap 4 Fields not lining up correctly in form group inline

Are u expecting like this :

#registration-btn{width:90px;outline:none;border:none;line-height:40px;color:white;background-color:#23b2e2;border-radius:10px;}.form-inline .form-control{width:80% !important;}#formContent{text-align:center;}.input_box{width:75%;display:flex;}.input-group-text{padding:0.8%;}label{width:25%;}.form-group{display:flex;}.form-control{width:100%;}#password{ width:calc(80% - 40px) !important;}.password-eye{width: 40px;text-align: center; border-radius: 4px;background-color: lightgrey;line-height: calc(1.5em + .75rem + 2px);}

<meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://use.fontawesome.com/ecdc7512a9.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><div class="wrapper fadeInDown">   <div id="formContent">      <div id="formHeader">         <a class="underlineHover" href="/">Login</a>         <a class="underlineHover" >Register</a>      </div>      <form th:action="@{/register}" method="post">         <div class="form-group form-inline">            <label for="playerName"> Player Name</label>            <div class="input_box">               <input type="text" required="true" id="playerName" autofocus="autofocus " class="fadeIn second form-control" name="playerName"/>            </div>         </div>         <div class="form-group form-inline">            <label for="playerId"> Username</label>            <div class="input_box">               <input type="text" required="true" autofocus="autofocus " class="fadeIn second form-control" id="playerId" name="playerId"/>            </div>         </div>         <div class="form-group form-inline">            <label for="email"> Email Address</label>            <div class="input_box">               <input type="text" required="true" autofocus="autofocus " class="fadeIn second form-control" id="email" name="email" placeholder="email@email.com"/>            </div>         </div>         <div class="form-group form-inline">            <label for="password"> Password</label>            <div class="input_box">                     <input type="password" required="true" id="password" class="fadeIn third form-control" name="password" data-toggle="password"/>            <span class="password-eye">                  <i class="fa fa-eye"></i>                  </span>            </div>         </div>         <div class="form-group form-inline">            <label for="password"> League Code</label>            <div class="input_box">               <input type="text" id="league" class="fadeIn third form-control" name="leagueCode"/>            </div>         </div>         <div>            <input type="submit" id="registration-btn" class="fadeIn fourth" value="REGISTER" >         </div>         <div>            <a class="underlineHover" href="#">Forgot Password?</a>         </div>      </form>   </div></div>

---

Related Topics