I have a bootstrap form in this jsfiddle and a simple label + textbox combo.
<div class="form-group">
<label class="col-md-4 control-label" for="af_Email">Email</label>
<div class="col-md-4">
<input id="af_Email" readonly="readonly" name="af_Email"
placeholder="" class="form-control input-md"
required="" value="frizzo#hotmail.com" type="email">
</div>
</div>
When page is expanded (assuming in the col-md-* range), labels right align and the margins are good and the page looks good.
When I shrink the page to something lesser than col-md-*, the labels left align, the margins to the panel are non-existent and it looks unprofessional:
How can I add margins (on both side of the panel) when page size lesser than col-md-*?
As a bonus question, can someone explain where in bootstrap this behavior is defined or documented?
Looks like you missed to add .col-md-12 before .form-group.
Here's the update: https://jsfiddle.net/ttb0xtn0/1/
Related
I am new to bootstrap forms. I see that the UI is different when the input is nested inside a label. Can someone explain me why?
Here is the code snippet
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>userName:
<input class="form-control col-sm-5" formControlName="userName" type="text">
</label>
</div>
<div class="form-group">
<label>userName:</label>
<input class="form-control col-sm-5" formControlName="userName" type="text">
</div>
</form>
My page is rendered as shown in an image. My question is why does the input element appear shorter in the first and longer in the second row?
it`s according HTML Way of treating Codes as Block and Inline elements.
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Source 1 Source 2
and the way bootstrap treat it according to flexbox theory
<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
I have bootstrap columns that has two labels and two inputs From and To, So From input is showing text correct but To input is not showing complete text when i load data dynamically.How can i fix this issue using bootstrap or I have to use css helper class to make it work.
when we use low resolution monitors problems occurs most of the time e.g 1366 x 768
main.html
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="issueFromDate" class="col-md-5">Issue Date
Range:</label>
<div class="col-md-7">
<div class="row">
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueFromDate"
name="issueFromDate" id="issueFromDate" disabled />
</div>
<div class="col-md-1">
<label class="control-label padd15"> To:</label>
</div>
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueToDate" name="issueToDate"
id="issueToDate" disabled />
</div>
</div>
</div>
</div>
</div>
I suggest you read more into the bootstrap grid system. You could use a mix of the different col- classes in order to make sure everything fits on the screen depending on the resolution. See this example:
Zoom and unzoom to see the grid system in action
Also, a date field always contains a maximum amount of characters. Therefore, you could set a min-width to the input
Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)