I have a bootstrap 4 form group with a simple text input. I am using it within a kendo dialog, however the dialog isn't automatically expanding so that the label's text and the input are all on a single line. I have played around with the CSS but can't figure out what is causing the issue. See the below dojo link.
https://dojo.telerik.com/EQuwayex
You can change your "test" div to following. I set a fixed with for the label and then reduced the textbox div to col-md-6.
<div id="test">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-6">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
If you want to control the width of the dialog you can add a width to the Dev element and then change the width of the textbox div element.
<div id="test" style="width:700px">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-9">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
Related
I have this layout
<div class="container-fluid header">
<div class="row">
<div class="col-md-4">
<label>Date From</label>
<input type="text" class="form-control" bsDatepicker [(bsValue)]="dateFrom" [minDate]="currentDate">
</div>
</div>
</div>
after that the label is on top of the input. I can't find a way so in this same col-md-4, the label to be
next to the input - inline. So they show together in the same line.
How can i make this and to preserve the responsivness of the col bootstrap class ?
Add form tag with inline class.
<div class="container-fluid">
<div class="row">
<form class="form-inline">
<div class="col-md-4 form-group ">
<label>Date From</label>
<input type="text" class="form-control" bsDatepicker [(bsValue)]="dateFrom" [minDate]="currentDate">
</div>
</form>
</div>
I'm making a simple form with this code:
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
</div>
It looks like this:
You can see that the input does not align with the jumbotron, and that is because the input doesn't stop at the padding:
How do I fix this?
Here you go with the solution
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You should use col-* inside a div tag
Column classes should be given to the elements surrounding the input controls (and labels). The Bootstrap grid system works best as follows:
div.container > div.row > div.col-* > content
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You have added Bootstrap's predefined grid classes in input element. So, Grid classes padding apply in input element. You will need to create grid classes with separate div element. then put input element inside this div element.
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
also, Please check this official bootstrap Horizontal Form
You are missing the parent element for the form-group. Try this -
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
</div>
You need to remove the "row" class from the form-group. the row class basically remove the padding from the div element.
<div class="form-group">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
Please note that I am a developer, not a designer.
I need to separate card div for two columns in desktop mode. I mean "This should be in Left Side" should be display on left side and "This should be on right side" should be display on right side.
I use following HTML.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
If you want to test online here is the jsfiddle (https://jsfiddle.net/uxfjwhpc/1/).
What is my mistake and how to correct it?
The classes col-* works when they are wrapped under row class. You can find the updated code below for card-block div. Hope this helps.
<div class="card-block">
<div class="row">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
<div class="row card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
This will work for you.
I have the same issue with adding Form inside Card in Bootstrap. Here is my implementation.
From the original bootstrap standard form implementation:
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to adjust it to this to work:
<form action="/action_page.php">
<div class="row">
<label for="email" class="col-md-2">Email:</label>
<input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to change form-group class to row class to make sure form-horizontal class should work fine inside the card of bootstrap.
I am working on an app that uses Bootstrap 3. In this app, I have a row defined like this:
<div class="row" style="background-color:navy; color:white;">
<div class="col-lg-3">
<h2>Welcome</h2>
</div>
<div class="col-lg-8">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
find:
</div>
<input type="search" class="form-control" id="queryField" />
</div>
</div>
</form>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-primary">Go</button>
</div>
</div>
I want to make the search field and the Go button vertically aligned with the Welcome text. The Welcome text is kind of vertically aligned. I tried adding vertical-align: middle. That did not work. I was trying to avoid using padding. But if its required, its required. I appreciate any help you can provide.
There is default margin, padding in all tags, so put a class of
h2{ margin: 0; padding: 0; }
and it is automatically come in same line
I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example
Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>
I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}
I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>