You can see in my Demo that the buttons aren't aligned correctly :-(
Is it possible to:
1) have a space between the input field and the buttons &
2) have the buttons vertically aligned correctly?
Demo: https://jsfiddle.net/xg69pkt0/
Code:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn">
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit" style="margin-bottom:10px">Find Address</button>
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/a3xnqy33/
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn inup-group-addon">
<button class="btn btn-default">Find Address</button>
<button class="btn btn-default" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
please see the modified fiddle
Hey You can check the following also. In your code you have not closed your divs properly.
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Postcode</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="concept" name="concept">
</div>
<div class="col-sm-4">
<div class="input-group-btn">
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
I am trying to create a form which should show an alert:
When hitting the button control next to the input control, it should show an alert. The alert appears correctly, however, the input controls following after shuffle to a wrong location:
I would like to see the following happen:
How could I prevent the shuffling of input controls on the left to the right side? Keep in mind that in the solution I would like the order of input controls to be the same when resizing to smaller screen size.
This is what I tried so far in code:
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
I tried wrapping up every two col-md-6 elements in a <div> element to see if these would keep sticking together. This was not the case:
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div><!-- Not working -->
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div><!-- End of change I tried -->
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
What could I do to fix this problem?
You are missing row class and also you required to update your DOM check snippet.
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<!-- Not working -->
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of change I tried -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
u need to wrap 2 col-md-6 divs in a row like this:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
You should place <div class="container-fluid"><div class="row" /></div></div> as parent to your child <div class="col-md-6" />
The important part is <div class="row"> /*child col */</div>
See sample snippets below:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
Tweak here: https://codepen.io/kenneth-bolico/pen/oNvmdRo
i have been creating a form by using bootstrap but the result is not ok for me. how can i make my form better?
<div class="row" ng-if="model.FieldType == customTypes.Select">
<div class="form-group">
<label class="control-label col-md-4">Seçim</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect"/>
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 pull-right">
<select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select>
</div>
</div>
</div>
</div>
If I'm right, you are looking for something like this. This code will fix alignment issue. How ever, I don't know the bootstrap way for setting top-margin. In this code, I'm using a custom css for setting top margin.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label class="control-label col-md-4">Seçim</label>
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+
</button>
</div>
</div>
</div>
<div class="col-md-8 col-md-push-4" style="margin-top: 4px">
<div class="form-group">
<select class="form-control"></select>
</div>
</div>
</div>
</div>
I have 3 panels with the same width but sometimes not the same height next to each other. When the heights are the same, the panels so line up correctly and there is no weird top margin.
However, when the height differs, some panels get dragged down and start lining up with the panel body? The panel bodies are also not always the same height
My HTML structure looks like this:
<div class="wrapper" data-reactid=".0.1">
<div class="col-sm-4 list" data-reactid=".0.1.0">
<div class="panel panel-default" data-reactid=".0.1.0.0">
<div class="panel-heading clearfix" data-reactid=".0.1.0.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.0.0.0.0">Melodic House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.0.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.0.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.0.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.1">
<div class="panel panel-default" data-reactid=".0.1.1.0">
<div class="panel-heading clearfix" data-reactid=".0.1.1.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.1.0.0.0">Deep House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.1.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.2"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" data-reactid=".0.1.1.0.0.2.0"></span></button>
</div>
<div class="panel-body" data-reactid=".0.1.1.0.1">
<form class="form-horizontal" data-reactid=".0.1.1.0.1.0">
<div class="form-group" data-reactid=".0.1.1.0.1.0.0">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.0.0">Min Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.0.1"><input type="number" class="form-control" id="minDuration" value="0" data-reactid=".0.1.1.0.1.0.0.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.1">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.1.0">Max Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.1.1"><input type="number" class="form-control" id="maxDuration" value="120" data-reactid=".0.1.1.0.1.0.1.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.2">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.2.0">Days old</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.2.1"><input type="number" class="form-control" id="daysOld" value="60" data-reactid=".0.1.1.0.1.0.2.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.3">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.3.0">Query</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.3.1"><input type="text" class="form-control" id="query" value="" data-reactid=".0.1.1.0.1.0.3.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.4">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.4.0">Sorting</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.4.1">
<select class="form-control" id="sorting" data-reactid=".0.1.1.0.1.0.4.1.0">
<option value="hot" data-reactid=".0.1.1.0.1.0.4.1.0.0">Hot</option>
<option value="likes" data-reactid=".0.1.1.0.1.0.4.1.0.1">Likes</option>
<option value="plays" data-reactid=".0.1.1.0.1.0.4.1.0.2">Plays</option>
<option value="date" data-reactid=".0.1.1.0.1.0.4.1.0.3">Date</option>
</select>
</div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.5">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.5.0">Player Height</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.5.1"><input type="number" class="form-control" id="height" value="166" data-reactid=".0.1.1.0.1.0.5.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.6">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.6.0">Track limit</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.6.1"><input type="number" class="form-control" id="limit" value="10" data-reactid=".0.1.1.0.1.0.6.1.0"></div>
</div>
<button class="btn btn-default pull-right" type="button" data-reactid=".0.1.1.0.1.0.7">Update</button>
</form>
</div>
<ul class="list-group" data-reactid=".0.1.1.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.2">
<div class="panel panel-default" data-reactid=".0.1.2.0">
<div class="panel-heading clearfix" data-reactid=".0.1.2.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.2.0.0.0">Tropical House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.2.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.2.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.2.0.2">
...
</ul>
</div>
</div>
</div>
(Sorry for the React clutter)
How do I get them all to line up at the top instead of the bottom?
I was not able to reproduce this from your code snippet, but this behavior is observed when using display:table-cell, in such cases a vertical-align: top aligns them at the top.
I'm trying to add a search glyph to a button at the end of this centered search bar.
Below is the style I want:
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">Search</span>
</div>
</div>
</form>
<br><br>
</div>
</div>
</div>
But I want to to have a button a - something like:
<span class="glyphicon glyphicon-search"></span></button>
instead of the
<span class="input-group-addon">Search</span>
but when I do this the button moves onto the next line and throws off my styling.
Using Bootstraps form-inline class and form structure will resolve your issue.
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center col-md-6 col-md-offset-3">
<h1>Jumbotron with form</h1>
<form class="form-inline" role="form">
<div class="form-group form-group-lg">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn btn-default btn-lg pull-left">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<br><br>
</div>
</div>
</div>
Try this:
DEMO
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span> Search</button></span>
</div>
</div>
</form>
<br>
<br>
</div>
</div>
</div>