I am attempting to place a input box in a bootstrap 3 button bar but it is not aligned as expected.
<div class="row">
<div class="col-xs-12">
<div class="btn-toolbar text-center">
<div class="btn-group">
<div class="input-group col-xs-3">
<input type="text" class="form-control">
<span class="input-group-addon">$</span>
</div>
</div>
<div class="btn-group">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
</div>
</div>
</div>
It works fine if I use a vanilla input but the buttons in the second btn-group move down to the next row when I attempt to use a input group. Any idea on how I can have them appear on the same row?
Here is a fiddle demonstrating the problem
http://jsfiddle.net/6XST2/
Set the col class to the parent element, the .btn-group. Change this:
<div class="btn-group">
<div class="input-group col-xs-3">
To this:
<div class="btn-group col-xs-3">
<div class="input-group">
Otherwise, the btn-group is filling the whole width.
http://jsfiddle.net/6XST2/3/
try to see this solution
and in this solution you must change the class col-xs-3 to col-xs-12
http://jsfiddle.net/6XST2/1/
Related
In my current ASP.Net core I am trying to do the boot strap styling for search component on the page. I want the UI to look like
where the label/input box and the Search button to appear in the middle of the screen and the Create New To show in the same row but to appear right side of the screen
I have tried like below
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<label class="col-auto" for="holiday"> Find by Holiday </label>
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<input type="submit" value="Search" class="btn btn-info" />
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0" style="text-align:right">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
</div>
</div>
</div>
</form>
</div>
And the UI shows up like below
Can anyone help say what is that I am missing why all the things appear so close, I tried adding the style="text-align:right" so the Create new will appear towards the right
***** EDIT *****
You could try this way to implement accordingly as per your
expectations like below:
Asp.net Submit Form With CSS
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
</div>
<div class="col-md-3" style="margin-left: -50px;" >
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-md-1">
<input type="submit" value="Search" class="btn btn-info" />
</div>
<div class="col-md-3">
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-md-2">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
</div>
Output
Note: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You
could use separate file as well. But this is the right and convenient
way to do what you are trying to.
My first guess is caused by your class 'col-md-2'. You can change all of 'col-md-2' to 'col-md-4' to test.
try adding ml-auto on the 'Create New' button
I have the following Code written in HTML and Angular:
<form [formGroup]="form">
<div class="modal-header">
<span class="modal-title">...</span>
<button type="button" class="close" aria-label="Close" (click)="dismiss()">
<fa-icon class="option-svg" icon="times"></fa-icon>
</button>
</div>
<div class="modal-body">
<div class="row form-group mt-3">
<div class="col-12">
<div>
<p>...</p>
</div>
<div>
<div class="col-6 form-group">
<select class="form-control" formControlName="selectedReason"
id="selectedReason" name="selectedReason">
<option *ngFor="let option of reasons" [ngValue]="option.text">{{option.text}}</option>
</select>
</div>
</div>
<div *ngIf="isOther()">
<div class="col-sm-6 col-lg-12">
<input class="form-control" id="other" type="text" aria-describedby="other" formControlName="other">
</div>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-12">
<p class="warning-message">Wollen Sie das Image wirklich produktiv schalten?</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row form-group">
<div class="col-6">
<button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
</div>
</div>
</div>
</form>
While testing it on Google Chrome, it works just fine and the buttons are as intended next to each other. On Internet Explorer though, the Swap button is underneath the other button. How can I fix this? :/
It works as expected on on IE/EDGE v11 and chrome.
Can you confirm the IE version used.
I used IE 11 to test your code all looks fine..
Is there any other CSS style? Which version of Bootstrap and angular version are you using? I have test your code on my side using Bootstrap 4 version, it seems that everything work well on my side(using IE11). Can you post enough code to reproduce the problem? And, you could also F12 developer tools to check the html resource and CSS style(especially the button and it's container's width property).
Besides, you can also change the following code:
<div class="row form-group">
<div class="col-6">
<button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
</div>
</div>
to
<div class="row form-group">
<div class="col-3">
<button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
</div>
</div>
I'm trying to recreate this example: https://getbootstrap.com/docs/3.3/components/#input-groups-buttons-multiple
Why if I copy this example, with the exact same code I see while inspecting elements, the buttons and input fields are not on the same line?
<body>
<div class="container-fluid">
<form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons">
<div class="row">
<div class="input-group">
<div class="col-lg-6">
<input class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Help"><span
class="glyphicon glyphicon-question-sign"></span></button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
Fiddle.
You have your column and input group reversed. Typically all content should be inside the column, and the only children of a row should be columns.
<div class="col-lg-6">
<div class="input-group">
Demo
I have two button groups containing two buttons each within a toolbar (so 4 buttons total), and want each button to be the same size, and distributed evenly in the parent div (in this case a bootstrap column. Is there a simple way to do this?
JSfiddle: https://jsfiddle.net/jh9sdurg/
The first row is what I am working with: buttons with unequal label lengths, and the second row is an example of how I want it to look, but I can only accomplish that using labels of equal lengths (eg. 'a', 'b', 'c').
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" id="qwerty">a<input id="qwerty" type="radio"></label><label class="btn btn-default" id="lButton1">aa<input id="qwerty" type="radio"></label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" id="qwerty">bbbbb<input id="qwerty" type="radio"></label><label class="btn btn-default" id="qwerty">bb<input id="qwerty" type="radio"></label>
</div>
</div>
</div>
</div>
<div class="col-xs-9" style="background: gray;">
col-xs-9
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row no-gutters">
<div class="btn-toolbar">
<div class="btn-group btn-block-3" data-toggle="buttons">
<label class="btn btn-default btn-block-2 active" id="qwerty">aa<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">aa<input id="qwerty" type="radio"></label>
</div>
<div class="btn-group btn-block-3" data-toggle="buttons">
<label class="btn btn-default btn-block-2 active" id="qwerty">bb<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">bb<input id="qwerty" type="radio"></label>
</div>
</div>
</div>
</div>
<div class="col-xs-9" style="background: gray;">
col-xs-9
</div>
</div>
</div>
You can override Bootsrap styling by using another css file or inline styling.
I went with a simple and quick way to fix this is to add the style = width:50%; on each of the buttons.
They would look something like this:
<label class="btn btn-default active" id="qwerty" style= "width: 50%">a<input id="qwerty" type="radio"></label>
<label class="btn btn-default" style= "width: 50%"id="lButton1">aaa<input id="qwerty" type="radio"></label>
I forgot to add that I wrapped the buttons in a <div class = "col-xs-1"> </div> , if you don't add that then the buttons will fill the <div class = "col-xs-3"></div> that they were originally on.
Like this:
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.