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
Related
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/
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
For some reason.. the button in the input-group keeps wrapping to the 2nd line.. the only way I can force it to stay on the 1st line is to use CSS to make the width 80% for example. But then the spacing seems off between the 4 elements..
Is there a cleaner way of doing this? I dont even know why it's wrapping to the 2nd line.. maybe because I'm using this in a Modal?
EDIT: how it looks like http://imgur.com/sfWqATl
<!--3rd row-->
<div class="row form-group">
<div class="col-md-2">
stuff...
</div>
<div class="col-md-4">
<div class="input-group">
<small>Logo 1 ID / File Path</small>
<br />
<div>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
stuff...
</div>
<div class="col-md-2">
stuff...
</div>
</div>
I think you may have gotten a little mixed up in setting up the classes and elements to chain correctly based on the documentation. I re-wrote some of the code to model it from the bootstrap website, and it appears to work fine:
<div class="col-md-4">
<small>Logo 1 ID / File Path</small>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
</span>
</div>
</div>
You can see the example here: http://www.bootply.com/EHvB2rn9YW
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
I have done a inline form using bootstrap. It don't work responsive if I try to minimize or shrink the width of browser. Not sure but are boot strap inline forms not responsive ? Controls just jumbled with each other. I cant change design of page. Kindly guide how I can correct this to work not jumbled and responsive in a clean and clear way.
Form in full width when it is ok:
Form in minimize browser or when screen width is reduced:
Here is my Markup:
<div class="row">
<div class="col-md-4">
<div class="col-md-3">
Round:
</div>
<div class="col-md-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>" />
</div>
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history"></div>
</div>
You may wish to use the class prefix .col-xs- instead of md Grid Options:
<div class="row">
<div class="col-xs-4">
<div class="col-xs-3">Round:</div>
<div class="col-xs-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>">
</div>
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history">
</div>
</div>