I'm trying to push my form-control to the left beside of my paragraph. Which won't work it always put below of the paragraph.
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class = "panel-body">
<p class = "thicker">STUDENT ID</p>
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
</div>
</div>
<div>
<div>
Add col-xs-3 to your p tag and change the order of the elements inside the panel-body from
<div class = "panel-body">
<p class = "thicker">STUDENT ID</p>
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
</div>
to
<div class = "panel-body">
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
<p class = "thicker col-xs-3">STUDENT ID</p>
</div>
UPDATE Using bootstrap built in functionality
Bootstrap has already a functionality for what you are trying to do see http://getbootstrap.com/css/#forms-horizontal . Using the built in functionality might make things easier for you in the future when the window is being re-sized, etc. Here is what the code will look like
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class = "panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="studentID" class="col-xs-3 control-label">Student ID</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="search" placeholder="Search">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Related
So I have this issues with bootstrap I have a row with 3 column:
col-md-4
col-md-8
col-md-2
All the information that I want to display are in col-md-8. I want to add a background color behind it but not to the whole column just the button and the information that I have display.
Here is the picture of the outcome right now:
And I do not want that I want something like this:
The background color only cover the information rather than cover the whole column.
Here is the code:
<div class='container-fluid'>
<div class="row">
<div class ="row " style = "margin-bottom: 5px;padding:0px;margin-right: 0px;margin-left:0px; ">
<div class = "col-md-4" style = "margin:0px;padding:0px;"></div>
<div class = "col-md-8" style = "border:none;margin:0px;background-color: #dcfdd7;">
<div class = "row ">
<div class = "col-md-12 " style = "margin:0px;padding:0px;">
<div class = "col-md-6">
<g:if test="${cus.status =='Inactive'}">
<g:form class="activateStatus" controller="customer" action="activateStatus" id = "${cus.id}">
<button type="button" class="btn btn-success activate-Status" style ="color:white;font-weight: bold">Activate</button>
</g:form>
</g:if>
<g:if test="${cus.status =='Active'}">
<g:form class="changeStatus" controller="customer" action="changeStatus" id = "${cus.id}">
<button type="button" class="btn btn-danger change-Status" style ="color:white;font-weight: bold">Deactivate</button>
</g:form>
</g:if>
<g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold">Back</button></g:link>
<g:link action="editCustomer" id="${cus.id}"><button id = "edit" type="button" class="btn" style = " font-weight: bold;color: white;background-color:#1f549c"><i id = "add-icon" class="fa fa-edit" aria-hidden="true"></i>Edit</button></g:link>
</div>
<div class = "col-md-4"></div>
<div class = "col-md-2"></div>
</div>
</div>
<div class = "row" style = "padding:0px;margin:0px;">
<div class = "col-md-12">
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Name:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.name}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Code:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.code}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Contact Person:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.contactPerson}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Status:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.status}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="customerId" value="${cus.id}">
</div>
</div>
</div>
Many thanks.
i tried to make the same website but your code is too complicated for the simple question you are asking , the main concept you should remember is "keep it simple" so it would be easy to help you , and for your self .
code :
https://stackblitz.com/edit/web-platform-v9i4fh?file=index.html
live website :
https://web-platform-v9i4fh.stackblitz.io/
here is a way of doing it , but in your code you have too much stuff going on , it is really difficult to understand how to solve it there . you need to remember the main concept of CSS . in a couple of minutes i will go through your code and will try to figure out what is going on
I have form, it been created within a register-box and want to widen the width to allow other controls like input text be created. Is there a way i can do this on bootstrap? please advised me below to my logic. I am struggling to achieve this and have not found relevant examples on the documentation on bootstrap, kindly please assist to improve this logic better. My register box is within a center and want to find a way to widen its width.
<center>
<div class="register-box ">
<div class="register-logo">
</div>
<div class="card">
<div class="card-body register-card-body">
<center>
<img src="~/Images/eNtsa.png" />
</center>
<center>
<p><b>Training Course Registration:Motion MasterClass</b></p>
<hr />
<p>Course date: 25-27 February 2020</p>
<hr />
<p>
Note:Please note your registration is submit approval as seats for this course is limited. Once your registration is confirmed, you will receive a quote for subject to your confirmation
followed by an invoice.
</p>
</center>
<hr />
#using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="row">
<label for="Title"> Title: </label>
<div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
<div class="input-group pull-left">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<label for="Name">Name:</label>
<div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
<div class="input-group pull-left">
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control", type = "text", id = "firstname", autofocus = "autofocus", placeholder = "First Name", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-2">
<label for="LastName">LastName:</label>
</div>
<div class="col-md-10">
#Html.TextBoxFor(m => m.LastName, new { #class = "form-control", type = "text", id = "lastname", autofocus = "autofocus", placeholder = "Last Name", required = "required" })
</div>
</div>
}
</div>
</div>
</div>
</center>
redefine the classes
.login-box and .register-box
Update the width:
width: 450px;
When I view my project on a desktop all the dropdowns are aligned and flush which looks really nice, when I minimize the browser to view on a mobile this is what it looks like,
As you can see all the dropdowns are difference sizes, I'm not sure how this happened? I'm aware it takes into considering the content you have in each i.e how long each word is but is there a safe way within bootstrap I can achieve a fixed width for all dropdowns wether its being viewed on a mobile/tablet or desktop? this is my current markup for the above picture
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Country</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCountry, Model.UserDetails.ListCountries, "Please Select Country", new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">State</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedState, Model.UserDetails.ListStates, new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">City</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCity, Model.UserDetails.ListCities, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Postcode</label>
<div class="col-lg-8 input-group">
#Html.TextBoxFor(m => m.UserDetails.Postcode, new { #class = "form-control", Placeholder = "Your Postcode", maxlength = "12" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
Should work since according to the Bootstrap example, any control with the .form-control class should have width:100% by default.
I noticed an issue with your class assignments for the rows though. It should look like so:
<div class="row">
...
</div>
and NOT:
<div class="row col-lg-12">
...
</div>
Let me know if that helps!
For some this will be quite easy, I have the following web page which is exactly what I'm looking for, which aligns in the middle of the page
But when I minimize this down to see how it renders when on a mobile screen it looks like this
How on earth is someone going to write an email address in that? can someone tell me what I'm doing wrong, this is my HTML
<div class="row">
<div class="container">
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-inline" }))
{
<div class="row">
<div class="col-xs-12 text-center">
<p class="text-center">
<strong>Enter your email and get special information:</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
<div class="col-xs-3"></div>
</div><!-- /.row -->
}
</div>
Use more than just the XS (extra-small screens) grid when specifying columns
Don't waste space on blank columns on XS screens.
Try something like:
<div class="row">
<div class="hidden-xs col-sm-3"></div>
<div class="col-xs-12 col-sm-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /col -->
<div class="hidden-xs col-sm-3"></div>
</div><!-- /.row -->
Bumped the input-group up to a full row on XS screens
Only started making the input-group narrower on SM (small) screens
After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>