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>
Related
I am trying to enlarge the text box with input-lg but it doesn't work, it remained the same. Also, the text overflowed to the next line, trying to make them align into a single line next to the text box.
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Email:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>New Password:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Role:</b></label>
<div class="col-sm-4">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Created At:</b></label>
<div class='col-sm-4'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Updated At:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
Which version of bootstrap you are using? Bootstrap 4 has no input-lg class. I have added the latest bootstrap 4.5.0 on your code.
I modified the col-sm-2 to col-sm-4 and col-sm-4 to col-sm-8 to adjust the width for label and input text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Email:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>New Password:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Role:</b></label>
<div class="col-sm-8">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Created At:</b></label>
<div class='col-sm-8'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Updated At:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</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.
I want to put textboxes with button in grid system horizontally, but button doesn't want to align vertically.(It must be in grid system because I want to stack these group of items in case of mobile devices):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
<div class="col"></div>
</div>
EDIT: I solved this problem in that way:
<div class="row">
<div class="col"></div>
<div class="col-sm-2 py-0 px-1">
Last name:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="Last name">
</div>
<div class="col-sm-2 py-0 px-1">
First name:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="First name">
</div>
<div class="col-sm-2 py-0 px-1">
Card ID:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="Card ID">
</div>
<div class="col-sm-2 py-0 px-1">
<button type="button" class="btn btn-sm btn-success btn-block mt-4
mb-2">Add</button>
</div>
<div class="col"></div>
</div>
Create a new class "abc" and add it to the div which contains the button:
.abc{
position:absolute;
bottom:0;
}
Hope this is what you need:
.abc{
position:absolute;
bottom:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary abc">Sign in</button>
</div>
<div class="col"></div>
</div>
Please use the below css class vcenter, it will both vertically and horizontally align all the child elements of the element with this class.
.vcenter {
display: flex;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2 vcenter">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
<div class="col"></div>
</div>
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.
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