I have a problem with <div>, as you can see :
firefox display:
chrome display:
html structure :
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="from_area" class="form-control input-lg typeahead typeahead-area-tariff" id="from_area" placeholder="Origin" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="to_area" class="form-control input-lg typeahead typeahead-area-tariff" id="to_area" placeholder="Destination" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="weight" class="form-control input-lg" id="weight" placeholder="Weight" />
<span class="input-group-addon">Kg</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="length" class="form-control input-lg" id="length" placeholder="Length" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="width" class="form-control input-lg" id="width" placeholder="Width" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="height" class="form-control input-lg" id="height" placeholder="Height" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-sm-offset-4 text-center">
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="7"><span class="fi flaticon-search"></span> Search </button>
</div>
</div>
I am using <div class="col-sm-4"> but when I see it on firefox, input text "Width" breaks to a new line. Please help :(
[SOLVED] Added <div class="clearfix"></div> after the third input text.
Reference
Related
Please, how can I inline a button and an input field without using <form>? I'm trying this way but it's not working.
.inline-button .inline-input{
vertical-align:middle;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I changed the form to a div and removed the additional CSS. I've also included the Bootstrap library because it appears that's what you're using.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number" />
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber" />
</div>
<button type="" class="btn btn-primary mb-2">Populate</button>
</div>
you can use
.col-md-2 > div {
display: inline;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.
The fiddle is here.
The code:
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.
d-flex and flex-column are already added to card-body.
I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.
Maybe you can use this code align-items-end in each group of form-group:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2 ">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OCQID">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
and the result:
You can use .align-items-baseline after using .flex row.
How do I use bootstrap col and rows to make my text area span multiple rows in a form.
Here is a screenshot of what I mean.
I want the "Notes" text area to span across the two columns to the area that I have highlighted in yellow.
here is the code I have so far
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-4">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-4">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</form>
Basically all you need to do is add another container around your elements.
Try this snippet:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
<div class="form-row">
<div class="col-md-8">
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-6">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-6">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
You can make the element use 4 columns and make it float to the right, while making the left elements float to the left.
why my email input not occupying full width in bootstrap column
I am using bootstrap and opening this html page with visual studio project's default base layout
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form">
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserFirstName" id="UserFirstName" class="form-control input-lg" placeholder="First Name" tabindex="1" required autocomplete="on">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserLastName" id="UserLastName" class="form-control input-lg" placeholder="Last Name" tabindex="2" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="MobileNumber" id="MobileNumber" class="form-control input-lg " placeholder="Mobile # (92)321-2255434" tabindex="3" required autocomplete="on" data-mask="(99)-999-9999999">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="BusinessName" id="BusinessName" class="form-control input-lg" placeholder="Business Name" tabindex="4" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group ">
<input type="email" name="Email" id="Email" class="form-control input-lg" placeholder="Valid Email Address (For Varification)" tabindex="5" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="Password" class="form-control input-lg" placeholder="Password" tabindex="6" required autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="7" required autocomplete="off">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7">
</div>
<div class="col-xs-12 col-md-6">Sign In</div>
</div>
<div class="row">
#Html.ValidationSummary("", new { #class = "text-danger" })
</div>
</form>
</div>
</div>
</div>
for your convenience I am attaching image file also, so kindly if some one can help me out
I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>`