So I have 2 buttons but one of them is in a form and is displayed on a new line. Can I align the two buttons in a line without moving the reply button inside the form?
<button class="btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
you can add pull-left to the top button to float that button and the inline content in the form will wrap beside it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="pull-left btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
Use display:inline in reply button and display: inline-block; in form.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<button class="btn btn-primary btn-xs" data-toggle="collapse" style="display: inline;">
<span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post" style="display: inline-block;">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
Related
I'm having trouble finding the right code to allign my div element to the right of the page.
Now I have this:
I want to have this:
Here is my code:
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
<div class="float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
The 2 buttons (yellow and grey) don't have anything to do with the form. The form is a search function of my page. I use bootstrap for styling.
I have resolved your problem please check following code
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
</div>
add class to you input tag like search-input
then in your css file
.search-input {
float: right
}
If you are using bootstrap 4 then you can do something like this. wrap your buttons and form into one div and give him class d-flex and ml-auto class to form tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
<div>
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
<div>
I want to have a form, containing a checkbox, a textfield and a button, with textfield taking as much width as available.
Is that possible?
<form>
<input type="checkbox">
<input class='form-control'>
<button class="btn btn-danger pull-right">
<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
Here's a codepen with my (failed) intent
EDIT: Changed my question to not require form-inline to achieve the same result
You can use calc() in input="text" and according to Bootstrap Docs Examples the button would be a sibling of form-group and not a child as you have.
Remember that .form-inline only applies to forms within viewports that are at least 768px wide. So you need to see full-page of the snippet.
.form-group {
border: red solid
}
input[type="text"] {
width: calc(100% - 17px)
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
</div>
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
UPDATE (based on your updated question) - that you want the same outcome even for smaller screen - therefore don't require form-inline)
I'll say lets keep form-inline but make button child of form-group instead of sibling (as I had earlier in my answer - and as it should be accordingly to Bootstrap Docs Examples)
.form-group {
border: red solid
}
#f1 input[type="text"] {
width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
width: calc(100% - 141px) /* large button */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="f1" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f2" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-sm btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f3" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-xs btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f4" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-lg btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
Try this:
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<input type="checkbox">
</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>
I am using a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
Using bootstrap3 I would like to set the width of the input type="text" in the input-Group.
I found these two solutions, but in this way I set the total width of all elements and not only the input text width.
.paginator {
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="paginator">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
bootply
How do I set only the width of the text input with bootstrap?
Thank you
-- EDIT --
I tried to set an inline class for text input as suggested, but this is the result.
bootply edit
Nobody can help me?
Thanks
I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code
<div class="btn-group" >
<div class="btn-group">
<button type="button" class="btn btn-default">
PERSONAL
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
COMPANY
</button>
</div>
</div>
When I select PERSONAL, the other one is deselected (as it should), but the problem is:
None of them are active when the form is started
I can deselect both clicking out of the form
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
And initialize with js after:
Enable buttons via JavaScript:
$('.btn').button()
You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.
I think that there is a better solution nowadays, according to the Bootstrap docs:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>