Aligning elements with bootstrap - html

I would like the markup below to display the "Format Example" string aligned with the textual labels of the following input fields as shown in the screenshot below. It's currently acting like it's been right-justified. Since I'm using AngularJS with Bootstrap I don't want to use things like static width, so how should I modify this to be more dynamic?
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">
<div style="float:left">
<legend>Copy</legend>
<div style="float:right">
<u>Format Example</u>
</div>
<br/>
<br/>
<div>
<input type="text" /> Format Unknown
</div>
<br/>
<div>
<input type="text" /> X.X.X
</div>
<br/>
<div>
<input type="text" /> YYYYMMDD-HHMM
</div>
<br/>
<div>
<input type="text" /> X.X-SNAPSHOT
</div>
<br/>
<div>
<input type="text" /> YYYY-MM-DD HH:MM:SS
</div>
</div>
</fieldset>


You'll just need to grid it out using columns and rows. This is a basic example and you'll need to add md, sm and xs sizing as needed. Preview the snippet in full screen.
Also, avoid using breaks to space out your rows. Do that with css instead.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">
<div style="float:left">
<legend>Copy</legend>
<div class="row">
<div class="col-lg-6 col-lg-offset-6"><u>Format Example</u></div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">Format Unknown</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">X.X.X</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">YYYYMMDD-HHMM</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">X.X-SNAPSHOT</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">YYYY-MM-DD HH:MM:SS</div>
</div>
</div>
</fieldset>

Related

Bootstrap alignment with columns

I am using Bootstrap CSS framework and have a row with 2 columns one with input field and label and other with input field with no label. Here it's a jsfiddle.
I want the second input field to be aligned with first input field. How can I achieve this?
Any help would be highly appreciated.
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4">
<input type="text" id="Last Name">
</div>
</div>
</div>

You can try this
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4 align-self-end">
<input type="text" id="Last Name">
</div>
</div>
</div>

Make HTML Input Elements the same size

I have 2 HTML containers, but because I have span elements followed by a text input (I think this is the issue?), I'm unable to get the content in the containers centered how I want. Is there a way to push the margin or padding in on these elements? Or is there a simpler way. In the JSFiddle, they spans are pretty large, but I'd like them to be around the size of the picture below. I'm using bootstrap.
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/oy4u1sm9/4/
Idealformatting (without the large span element, of course)

Using <span> tags as labels is not best practice as they are inline elements. Try to always use <label> tags. Here is your code tweaked to match your desired styling. More comments in the fiddle below.
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
I made some comments in the code for clarity. Here you go:
https://jsfiddle.net/hmLpdnqa/

You just included wrong bootstrap file. Try this and see your issue resolved or not.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>

Bootstrap row layout

I'm trying to create a form that will appear in a modal window and I have the form looking exactly what I want. Here's my HTML (only showing the first row because I believe the right solution will apply to all my rows)
<div class="container">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-8">
<form action="#" method="post">
<fieldset>
<legend style="width: 80%">Base Information</legend>
<div class='row'>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-2"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
The problem I'm facing is that I'm currently viewing this using Chrome and when I horizontally resize the browser window to less than 760 pixels, all the form elements are stacked on top of each other.
As you can see there's a lot of spacing to the right I'm trying to get rid of.
Does anyone have any suggestions on how I can eliminate the padding on the right?

col-xs instead of col-sm would help with the breakpoint issue. You also seem to have empty space on the right because you specified two columns of empty space <div class="col-sm-2"> </div>. Bootstrap's grid system is based uon 12 columns per row, so the two column spanning div would be occuping space.

Bootstrap suggests 12 columns. Your layout uses only 9 of them:
<div class="col-sm-1"> </div>
<div class="col-sm-8">
...
</div>
You can use col-sm-10 col-sm-offset-1 instead of col-sm-8, <div class="col-sm-1"> </div> and <div class="col-sm-2"> </div> (offsetting columns):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form action="#" method="post">
<fieldset>
<legend>Base Information</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

How to set up multiple adjacent forms using Bootstrap

Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.

You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>

do I need to use percentages or fixed values in bootstrap 3?

I am new to Bootstrap and Bootstrap 3.. I assume I should always use percentages to specify widths and never fixed values.. is that correct.
I need my row to not go to the whole screen, but only take up as much room as it needs based on the inner elements..I asssume I need to just set the width of the row.. or is there another way?
<div class="row" style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="col-xs-1">
<label style="width:100px;display:block">FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label style="width:100px;display:block;">Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</fieldset>
</div>

I imagine this is what you are going for. The col-... divs must be immediate children of the row div.
http://jsfiddle.net/742qj/
<div style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
Or perhaps
<div clas="row">
<div class="col-lg-2">...</div>
<div class="col-lg-10">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
</div>