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>
Related
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>
I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.
<div class="row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
</div>
</div>
In action: Bootply
As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
</div>
<div class="col-lg-6">
<button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
</div>
</div>
Separete the col-lg-6 and input-group from the div
Bootply : http://www.bootply.com/W8ao9A0a4r
See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know.
<div class="actions row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
</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 attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>