https://jsfiddle.net/5nj5nmqz/3/
<h1 class="page-header row">
Header
<div class="col-md-4">
<a href="#" class="btn btn-default">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Search by check name...">
<span class="glyphicon glyphicon-search"></span>
</div>
</h1>
Having a bit of trouble getting the elements within the header to align correctly, as well as getting a bootstrap glyphicon icon to line up inside the input field.
Any ideas on how this could be done correctly? I tried wrapping in rows and moving the columns, but it seems to be off every time.
Try this.
<h1 class="page-header">Header</h1>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default pull-right export">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback pull-right">
<div class="form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Username" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</div>
</div>
Few things to note:
<h1 class="page-header row"> is wrong. When using the bootstrap cols, you should create a row by simply saying <div class="row">.
Bootstrap can have 12 columns per row I think. If you are designing the row-column way, the correct way is to create a <div class="row"> and it's children should be <div class="col-**-n"> where the n's of all children add up to 12.
Related
i have a simple question hope you can help me .
I have a form and there are some in put fields that i add by addmore button .. but when i add file and descriptions it s not sending values..here is my form
<div class="row clone">
<div class="col-md-6">
<label class="mr-2 ml-2">Görsel</label>
<div class="input-group control-group ml-2">
<input type="file" name="image_name[]" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="mr-2 ml-2">Meta Açıklama</label>
<div class=" input-group mr-2 ">
<input type="text" name="image_description[]" class="form-control">
<span id="addFile" class="btn btn-success ml-2 mr-2">
<i class="fa fa-plus-circle "></i></span>
</div>
</div>
</div>
<div class="hidden row" style="display:none;">
<div class="row removeable col-md-12">
<div class="col-md-6 ">
<label class="mr-2 ml-2">Görsel</label>
<div class="input-group ml-2">
<input type="file" class="form-control" name="image_name[]">
</div>
</div>
<div class="col-md-6">
<label class="mr-2 ml-2">Meta Açıklama</label>
<div class="input-group control-group ml-2 ">
<input type="text" name="image_description[]" class="form-control" >
<span class="btn btn-danger ml-2 mr-1 removeBtn">
<i class="fa fa-times"></i></span>
</div>
</div>
</div>
</div>
and i create this extra file input by addmore button with jquery below
$("#addFile").click(function() {
var lsthmtl = $(".hidden").html();
$(".clone").append(lsthmtl);
});
$("body").on("click", ".removeBtn", function() {
$(this).parents(".removeable").remove();
});
but when i checked the request , only first file and description input values are coming..the inputs that i created by addmore button are nt sending values.Is there anyone have any idea ??
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 am new in html and I have a code where I would like to align the input tag and the button on the right sign on the same line. How can I do that?
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
My jsfiddle : https://jsfiddle.net/DTcHh/17952/
You can also do it in this way...
<style>
.nopadding{
padding:0;
}
</style>
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon nopadding">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
</div>
</div>
</div>
Since you are using bootstrap you can just add pull-right in the input field and button both.
For example:
<input type="text" class="form-control pull-right" />
In button as well:
<button class="btn btn-del input-group-delete pull-right" data-tooltip="tooltip" >
While using addon in bootstrap if you define any element inside the addon span it will cluttered because in bootstrap the addon class have padding in css and that is way you button will not aligned in this case you can do it like this :
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon btn btn-del input-group-delete"> <i class="fa fa-trash-o"></i>
</span>
</div>
</div>
Okay try this
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group col-xs-9">
<input type="text" class="form-control" />
</div>
<button class="btn btn-del input-group-delete col-xs-3" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
</div>
I'm trying to move the class "top" (my search bar/button) half way down the page but am having no luck using bottom or anything else. Currently it's just stuck at the top. I would also like to make the search box bigger but am not sure how to.
<div class="row top">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
<div class="col-md-2">
</div>
</div>
Also I'm sure there's a better way to center my search box instead of adding columns either side to appease the grid system but I have no idea, any tips?
Here's what it currently looks like:
Try adding your own class to the div
CSS
.top-buffer { margin-top: 30px;}
HTML
<div class="row top top-buffer">
<div class="col-md-8 col-md-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
</div>
I'm trying to create a single row with search inputs (a text input and an 'attached' button) at the left, and a button at the right (the bit above the grid):
Here's the code:
<form class="row form-inline">
<div class="form-group col-xs-6">
<div class="input-group">
<input name="search" type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-xs-6">
<a class="btn btn-default btn-sm pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
The problem is that the width of text input is too small at the 'lg' and 'md' browser sizes, and only increases to something that looks OK when the browser is at smaller sizes. What's the best way to increase the width of the search input at larger browser sizes?
Try this as well
<form class="row form-inline">
<div class="form-group col-md-8">
<div class="input-group">
<input name="search" type="text" class="form-control col-md-6">
<span class="input-group-btn col-md-2">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-md-4">
<a class="btn btn-default pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
why dont you set the width on the input using bootstrap classes? e.g.
<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">
As you can see in Bootstrap DOC form-inline require setting a width for input componentes:
http://getbootstrap.com/css/#forms-inline
To solve that problem I have custom classes for that:
.input-width-X {width: X}
.input-width-Y {width: Y}
...
and use media queries for this classes in order to apply them just when you are not in XS mode, because Bootstrap set 100% width on it.
Sorry about my english :)