I have a text input and some input-group-addon elements attached to it. It looks by default, but when I try to center align with text-center, only the input moves over but not the input-group-addon which stays left aligned and looks completely wrong.
I tried center-block but it does even less (doesn't center either components). I tried wrapping in other divs but no luck. I am very new to css so apologies if this is very obvious!!
<div class="text-center">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"></span>
<span class="input-group-addon" id="basic-addon2"></span>
<span class="input-group-addon" id="basic-addon3"></span>
<input id="password-input" type="password">
<button id="password-submit" class="btn btn-default">Submit</button>
</div>
</div>
fiddle: https://jsfiddle.net/m0L2cofg/2/
Thanks
If you're not adverse to using a little CSS, I'd recommend turning the input-group into a block-level element, and the input-group-addons into inline elements. This way you can center them on text-center with margin: 0 auto.
I've also given the last one a bit of margin to the right to give it an equal offset to the submit button in the following example:
.text-center {
margin: 0 auto;
}
.text-center .input-group {
display: block;
}
.text-center .input-group-addon {
display: inline;
}
.text-center .input-group-addon:last-of-type {
margin-right: 4px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"></span>
<span class="input-group-addon" id="basic-addon2"></span>
<span class="input-group-addon" id="basic-addon3"></span>
<input id="password-input" type="password">
<button id="password-submit" class="btn btn-default">Submit</button>
</div>
</div>
Hope this helps! :)
Related
why does the input element render differently in a bootstrap col-auto column than a span element? An input element with class form-control renders wider in the col-auto column than a span element with the same styling.
I want to render, using bootstrap, a span element the same as a readonly input element.
span.input-readonly-like {
background-color: #e9ecef;
padding:6px 12px;
display:block;
border-radius:.25rem;
border:1px solid #ced4da;
width:100%;
line-height: 1.5;
}
<div class="container mt-3">
<div class="row">
<div class="form-group col-auto">
<label>LOC - SPAN</label>
<span class="form-control input-readonly-like">MM68A0</span>
</div>
<div class="form-group col-auto">
<label>LOC - INPUT</label>
<input type="text" class="form-control" readonly value="MM68A0">
</div>
</div>
</div>
What you see is the expected behavior. From the docs:
Use col-{breakpoint}-auto classes to size columns based on the natural
width of their content.
So any particular demand for .col-auto? Use .col and you will achieve what you want: Two equally sized .form-group's. They will fit the parent .row containers entire width:
<div class="form-group col">
<label>LOC - SPAN</label>
<span class="form-control input-readonly-like">MM68A0</span>
</div>
<div class="form-group col">
<label>LOC - INPUT</label>
<input type="text" class="form-control" readonly value="MM68A0">
</div>
I have this code:
<div class="panel-footer rounded" style="background-color: #B7B56E">
<button class="btn btn-xs rounded" (click)="refreshNow()" style="float: right"><span class="glyphicon glyphicon-refresh"></span><small>{{nextTick|date: 'mediumTime'}}</small></button>
</div>
and result appears as:
My question is: how do I align the button at the center of the panel?
PS: It should be inside the green panel.
First of all, remove float: right. Then text-align: center should do the job:
.panel-footer {
background-color: #B7B56E;
text-align: center;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
Delete float from button and add text-align: center to div element.
Here you go. Full bootstraps' classes used with no tricks. Just adding align-items-center solves the problem. But do not use the float style itself. If you use the CSS framework, please be so kind to read the docs. There are a lot of features which are enough for not to manipulate the styles for layout.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center bg-info">
<button class="col btn btn-outline-primary">Hello I'm centered</button>
</div>
</div>
you can do the following if you still want the button to be floated right, but centered vertically inside of your panel-footer div
.panel-footer {
background-color: #B7B56E;
overflow: auto;
}
.btnClass {
float: right;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded btnClass" id="button" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
I've looked at other posts on how to vertical-align: middle with bootstrap. That works fine.
What I'm trying to do is to create a search bar with a "go" button as per standard bootstrap (http://getbootstrap.com/components/#input-groups-buttons) that is vertically aligned in a div as seen here:
<div class="col-lg-6 vcenter">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
Problem I have is the minute I try to add in css to vertically align it, everything goes crazy and it's no longer aligned:
.vcenter {
height: 375px;
line-height: 300px;
}
.vcenter input, .vcenter span{
display: inline-block;
vertical-align: middle;
}
Any help would be appreciated.
Please refer the code:
Remove the css following css:
.vcenter {
height: 375px;
line-height: 300px;
}
.vcenter input, .vcenter span{
display: inline-block;
vertical-align: middle;
}
and update as simple:
.vcenter {
margin-top:50px;
}
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 vcenter">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
I am trying to place two elements side by side. I used css inline block but surprisingly its not working.
<div class="item-body" style="display:inline-block">
<!--- Element 1--->
<div style="width:150px;" class="input-group">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt===1?1:selectedItem.qnt-1;updateSelectedItemData();" class="btn spinner-down red" type="button">
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" style="text-align: center;" ng-model="selectedItem.qnt" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt+1;updateSelectedItemData()" class="btn spinner-up green-haze" type="button">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--- Element 2--->
<div > x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
Element 1 and element 2 is appearing in different line
You need to apply display: inline-block; to each element that you want to be displayed in the same line, not to their parent container. I've added background-color so it's clearly visible where each <div> is exactly located. For both inline-blocks to be aligned vertically, use css property vertical-align.
.item-body > div {
vertical-align: text-top;
}
<div class="item-body">
<!--- Element 1--->
<div style="display: inline-block; width:150px; background-color: #f8f8f8;">
<div>
<button>-</button>
</div>
<input type="text" style="text-align: center;">
<div>
<button>+</button>
</div>
</div>
<!--- Element 2--->
<div style="display:inline-block; background-color: #ddd;"> x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
I'm implementing a permission-to-role assignment screen using Bootstrap 3 modal. Please, see a demo of current state in full screen, so the selects are not stacked under each other, but aligned aside. As you see, now the buttons are sticked to the top, but I want to place them in one columnt at the center of modal:
The code is trivial, check plunkr for details:
<div class="modal-header">
<h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-5 form-group">
<label for="availablePermission">
Available permissions
</label>
<select id="availablePermission" class="form-control" size="14">
<optgroup label="General">
<option value="0">Change password</option>
...
</optgroup>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-primary">
<i class="fa fa-fw fa-angle-right"></i>
</button>
<button class="btn btn-primary">
<i class="fa fa-fw fa-angle-left"></i>
</button>
</div>
<div class="col-md-5 form-group">
<label for="existingPermission">
Assigned permissions
</label>
<select id="existingPermission" class="form-control" size="14">
<optgroup label="General">
<option value="1">View users</option>
...
</optgroup>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">OK</button>
<button class="btn btn-warning">Cancel</button>
</div>
I've tried flexbox for middle column with display: flex and flex-direction: column but the buttons didn't move a pixel. display: table-cell and vertical-align: middle does not work either. Is it possible to beautifuly centrify them without using hard-coded dimensions?
Managed to get it working with flexbox, though losing a bit of adaptiveness: try changing the width - selects won't stack vertically now :( Adding a #media query (similar to the one for Bootstrap's *-md) will fix this.
#media (min-width: 992px) {
.flex-row {
display: flex;
}
}
.flex-col {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
}
Plunkr
Since you probably know the height of the 2 buttons, you can do this:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: THEWIDTHpx;
height: THEHEIGHTpx;
Also you need to put position: relative; to the row. This will center the box with 2 buttons perfectly in the middle of the row.
If you're using floats to put divs next to each other, make sure the row has a clearfix.