Arrangement of label and input field on my webpage

I am looking to vertically align all the fields one below another. Currently, they are randomly aligned with Bootstrap CSS. The desired layout should look like this:

Label1: Textbox1
Label2: Textbox2

Here is the code snippet: Which class should I use to fix the textbox alignment? Any suggestions?

<div ng-controller="headerCtrl">
    <div class="container" style="background-color:white">

        <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>


        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->

                <div class="panel-body">

                    <section>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group" style="margin-left:-125px;">
                                        <label for="currentmonth">Total Work days in Current Month:</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </section>



                        <div class="pull-right">

                            <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>

                            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                        </div>






                    </div>
            </div>

        </div>
        <div>

        </div>
    </div>

</div>
htmlcsstwitter-bootstrap

Answer №1

Your labels are too verbose, so I have modified the layout to be center-aligned. Is this more suitable for your needs?

.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
  <div class="container" style="background-color:white">
    <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default"> 
        <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->
        
        <div class="panel-body">
          <section>
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group" >
                    <label for="currentmonth">Total Work days in Current Month:</label>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Annual Leave :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave">Sick / Emergency Leave :</label>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Month your name was added in Field Glass :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
          </section>
          <div class="pull-right">
            <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
          </div>
        </div>
      </div>
    </div>
    <div> </div>
  </div>
</div>

Answer №2

I have eliminated all of the inline styles that were previously present. Utilizing bootstrap classes is a more efficient way to style each element individually.

<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
    <h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-body">
                <section>
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
                                    <div class="col-sm-6">
... (remaining code continued)

Answer №3

Include the form-inline class within the form element for example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

source: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

Answer №4

Take out the form-inline class from the form element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

javascripthtmlcssbootstrap-4html-table

Create a CSS animation that causes a div element to smoothly float out of the document

I want to add a CSS animation featuring clouds moving from left to right. In my design, I have a div with a 100% width containing cloud images styled with "position:absolute". My initial approach was simple: create an animation that gradually changes the " ...

htmlcsscss-animations

What is the method for creating a URL (link) that simulates entering text into a text box and then pressing a button?

There is a button on a 3rd party homepage that goes by the code: <INPUT class="widget-content" TYPE="TEXT" onchange="javascript:document.foo.submit();" NAME="RegExRef"> I am looking to automate the task of populating the text box and clicking the b ...

htmlurl

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

What is the best way to make content stretch to 100% width when there is no content in the sidebar?

As I work on developing my custom theme for Drupal, I am seeking a solution that will allow the content width to adjust depending on the presence of a sidebar. When there is no sidebar, I want the content width to be 100%, and when a sidebar is present, I ...

htmlcssdrupallayoutcss-float

Issue with Div Element Not Expanding When Populated

I am facing an issue with a stack of nested divs, each having a specific ID for CSS styling. However, the outermost DIV tag is only expanding to a predetermined height value instead of automatically adjusting to fit its contents. This is a problem because ...

csshtml

Completing a form with editable content - using PHP and HTML

I've browsed through numerous questions here, but I haven't found a solution that works for me. Here are the instructions I'm working with: $query = "SELECT nazwa,rok_prod,wypornosc FROM statek where id_statek=$id"; $wynik = pg_query($query ...

phphtmlpostgresql

Expand Bootstrap accordion on hover

I have tried several examples that I discovered on Google and Stack Overflow, but none of them seem to work. So, I decided to attempt a different solution for opening the Bootstrap accordion on hover, however, it is not working as expected. Do you have any ...

javascriptjqueryhtmlcsstwitter-bootstrap

Code snippet in webpage body

Hey there, I could really use some assistance: I currently have the following: A) Login.html B) Documentation.html C) Base.html Within the login page, there is a form with fields for User and Password. In Documentation, there are links to various folder ...

javascripthtmlcssinclude

What is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

cssshadowbox-shadow

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

What is the recommended way to select a checkbox using JQuery?

I have exhausted all options and nothing seems to be working. This is the checkbox in question: <input type="checkbox" onchange="WriteFormSelections('SearchForm', 'AccommodationType', 'AccommodationTypeSelections', 'A ...

javascriptjqueryhtmlcheckbox

To reveal more options, simply click on the button to open up a dropdown

I am currently utilizing the Bootstrap 5 CDN and I am looking for a way to automatically open the dropdown menu without having to physically click on it. Within the navbar, I want to display the "Dropdown Link": <nav class="navbar navbar-expand-sm ...

htmlangulardrop-down-menubootstrap-5

Instructions for creating a distinct click listener for each <img> element inside a table cell

Within my table, each row contains multiple columns with images as data. I successfully implemented a 'common listener' that is triggered when any image within a table row is clicked. $('#mytable tbody td img').click(function () { // ...

javascriptjqueryhtml

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

javascripthtmljsonajax

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

javascriptcssangulartypescriptangular-material

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Is it possible for two overlapping Javascript divs to both be draggable at the same time?

I have multiple stacked div elements. The top one needs to be draggable, while the one beneath should remain clickable. An illustration is provided below for better understanding: The green div elements are contained within cells. Clicking on a cell trigg ...

javascripthtmlcss