I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question
I have the following code for 2 forms on my page
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Join a group</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</form>
</div>
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Create a new group long text</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupName"
name="groupName"
placeholder="Fill in the groupname"
/>
</div>
<button
type="submit"
id="form-submit-create-family"
name="form-submit-create-family"
class="btn btn-primary"
>
Create
</button>
</form>
</div>
</div>
</div>
This looks like this
2 columns that looks the same
when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.
wrong layout
I would like it to be the same, so the input box of the first one should be on the same height as the second one
You can use flex for that!
I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.
<form method="POST" class="h-100 d-flex flex-column justify-content-between">
<h3 align="center">Join a group</h3>
<div>
<div class="form-group mt-auto">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</div>
</form>
https://jsfiddle.net/1jzgohs4/
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 can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.
They need to be center aligned.
This is what I want it to look like...
This is what is happening...
Here is my current code.
<div>
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
I have created this js fiddle...
https://jsfiddle.net/ptwbn2av/
Thanks!
You could also try the pull-left class.
The classes .pull-left and .pull-right also exist and were previously
used as part of the media component, but are deprecated for that use
as of v3.3.0. They are approximately equivalent to .media-left and
.media-right, except that .media-right should be placed after the
.media-body in the html.
The html:
<div>
<div class="pull-left">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
You can use:
style="margin-right:5px"
to add some spacing after the div, and then the new mark-up would be as follows:
<div>
<div class="pull-left" style="margin-right:5px">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
With your current code, you can use the flexbox.
A powerful CSS layout module that gives us an efficient and simple way to lay out and align things.
<div class="flex">
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
.flex {
display: flex;
flex-direction: row;
}
This is the screenshot of the result:
You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Cheers!
divs are block elements, which means that they align vertically. For example,
<div>
Hello World!
</div>
<div>
Goodbye World!
</div>
would result in:
Hello World!
Goodbye World!
So, in order to make the elements flow horizontally, you have to make the div inline because inline elements can flow horizontally, such as text and <span>.
You can add a rule to your css:
#delete-button {
display:inline-block;
}
And of course, you should add an id attribute to the button.
If the above doesn't work, you should consider putting all the elements in one div because <button>, <input>, and <span> are all inline elements.
Just add the grid classes. Try this
<div>
<div class="col-xs-2">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
https://jsfiddle.net/xbu9qtje/
Here one solution to the problem.
<div class="container">
<div class="input-group">
<button class="btn btn-outline-primary border-left-0 border" type="button">
Delete
</button>
<input type="text" class="form-control py-2" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
You can see the output at this link: codeply.com/p/xijLBe2vff.
Try the form-inline class in the root div, it will default to "inline" putting your fields one next to the other:
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn">Delete</button>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
you can just put
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #disabled = "true", #class = "input-group-addon", #style = "width:50px;text-align:center;" } })
<div class="col-md-12">
<div class="col-md-1">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-md-11">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</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 am trying to have a textbox in bootstrap, which has the same look and feel as the one you place inside a panel (large, rounded corners, full div length). On the right side of such a textbox I want to have a few buttons.
I tried a bunch of stuff - either it becomes correctly aligned, but the textbox loses all styles. Or the textbox looks correct, but the buttons wrap down to next line!
Some of what I have tried:
<div class="row">
<div class='col-md-8'>
<input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</div>
</div>
and...
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
and...
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
Nothing works!I am thinking it shouldnt be so hard to place a bunch buttons next to a textbox that takes all available space and is nice and large :(
Any help is very much appreciated
Couldn't you just do it like this?
<div class="form-group">
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Stuff2" />
</div>
<div class="col-md-3">
<button class="btn btn-primary">Save</button> <button class="btn btn-danger">Delete</button>
</div>
</div>
As far as I know that to combine textbox and button, I use:
class="input-group"
and give class="form-control" to all textboxes
You mean like this follows:
<div class="row">
<div class='col-md-8'>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn">Sign up</button>
</span>
</div>
</div>
</div>
If it is what you mean, here's the demo:
Demo in jsFiddle