Maximizing input spacing with Bootstrap3

I am working on a single page application using Bootstrap 3 and AngularJS. Instead of using a datepicker to select dates, I want to have separate inputs for day, month, and year.

Here is the HTML code for the date fields:

            <div class="col-md-8">
               <div class="row">
                   <label>Start date</label>
               </div>
               <div class="row">
                   <div class="col-md-3">
                      <input type="text" name="day" class="form-control" placeholder="Day"/>
                    </div>
                    <div class="col-md-6">
                        <select class="form-control">
                            <option>Month</option>
                            <option>January</option>
                            <option>February</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="" class="form-control" placeholder="Year"/>
                    </div>
                </div>
            </div>

I am looking for suggestions on how to improve the layout for better alignment and spacing. Right now, the label alignment is off and there is too much space between the fields.

htmlcssangularjstwitter-bootstrap-3

Answer №1

Check out the grid system documentation for a better understanding. Avoid nesting .row as it can result in a negative margin. One way to achieve your desired layout is by adjusting the css code like this:

DEMO: http://jsbin.com/qukema/1/edit

You may also consider using .form-group instead of .row with appropriate css modifications.

CSS:

@media (max-width:991px) {
    .v-space {margin:5px 0;}
}

.custom-form [class*="col-"] {
    padding-left: .5%;
    padding-right: .5%;
}
.custom-form.row {
    margin-left: -.5%;
    margin-right: -.5%;
}

HTML

 <div class="container">
     <!-- Avoid nesting containers. If using row, ensure there is a .container parent -->
     <form role="form">
        <label>Start date</label><!--no grid class required -->
        <div class="row custom-form">
           <div class="col-md-3 v-space">
              <input type="text" name="day" class="form-control" placeholder="Day"/>
           </div>
           <div class="col-md-6 v-space">
              <select class="form-control">
                 <option>Month</option>
                 <option>January</option>
                 <option>Febrary</option>
              </select>
           </div>
           <div class="col-md-3 v-space">
              <input type="text" name="" class="form-control" placeholder="Year"/>
           </div>
        </div>
     </form>
  </div>

Answer №2

The alignment of the label differs because it is positioned outside of a column.

The gap between columns is referred to as the gutter. By default, Bootstrap sets the gutter at 15px on both the left and right sides of each column. This means the first column has a 15px margin to the left and a 30px gap between columns.

http://getbootstrap.com/css/#grid

You have the option to adjust the default margins, but keep in mind that this will impact your entire grid layout. Consider exploring Bootstrap's form examples for more guidance:

http://getbootstrap.com/css/#forms

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

Removing filters dynamically from ng-repeat in Angular

I am currently using ng-repeat to display a list of staff members: <div ng-repeat="user in staff | profAndDr"> There is also a custom filter called 'profAndDr' that only shows people with the titles "Dr." and "Prof.": app.filter('pr ...

javascriptangularjs

The timeline shows the movement of the jQuery object

I currently have a timeline bar that looks like this: <div class="plan-bar main-gradient"></div> https://i.stack.imgur.com/ybJar.jpg My question is, how can I make the red box move in real-time along this timeline bar? Thank you for your hel ...

javascriptjqueryhtml

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

javascripthtmlcssnull

Modify the height of the material design toolbar

Can you help with adjusting the height of md-toolbar in material design? Check out this link for more information. I am trying to set the height of the first toolbar to 30px, but I have not been successful with this code: <md-toolbar style:"height: 3 ...

angularjsangular-material

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

javascriptjqueryhtmlcssajax

AngularJS unit testing may encounter challenges when dealing with scope providers that are

I attempted to replicate a similar scenario as shown in the video tutorial on egghead.io. Initially, the test was successful but encountered issues once I introduced $scope and $rootScope into the controller. var myApp = angular.module("formulaViewer", [ ...

angularjsunit-testing

What is the best way to eliminate the dotted border from clickable images?

The client has expressed their dislike for the dotted border, but I believe it is important to keep it for accessibility reasons. However, I suppose I will have to remove it since the client requested it. How should I proceed? ...

htmlcssimage

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

jqueryhtmlcssflexbox

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

htmlcssangularangular-materialslider

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

javascripthtmlbootstrap-4

Tips for adding an svg element to an existing svg using d3.js

Can another SVG be appended to an existing SVG parent using d3.js? I have tried using the 'svg:image' attribute, but unfortunately, I lose full control over the inner SVG child. The DOM node is created by d3, but it is not rendered, resulting i ...

javascripthtmlangularjsd3.jssvg

Incorporate numerous elements using AngularJS

Hey there, I've run into a little issue with my code. I've created a button to add elements to a list, but it only adds one object at a time. How can I make it so that each click on the button adds a new object to the list? Here's the HTML: ...

angularjs

Feeling a bit lost on my first JQuery project, could use some

Yesterday, a kind person on this platform assisted me greatly in building my first validation from scratch. I have made significant progress since then. This is my first time working with JQuery, so I apologize in advance for my messy code. Everything work ...

phpjavascriptjqueryhtml

"Navigating back to the previous screen in Ionic 2 - A step-by-step guide

When using Ionic q, we can go back to the previous screen with $ionichistory.goback(). However, in Ionic 2, how can we achieve the same functionality? I have tried using a button with a click event to print a console message but it is not working. <ion ...

htmlangularionic2hybrid-mobile-app

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss

What is the best way to coordinate text and photos within Bootstrap?

Currently, I am working on a bootstrap website that features a slideshow with 3 photos. The jQuery function responsible for this is as follows: $(function () { $.vegas('slideshow', { backgrounds: [{ src: 'img/ph1.jpg ...

javascriptjqueryhtmltwitter-bootstrap

Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the da ...

sqlcssdatabase

Learn the process of automatically copying SMS message codes to input fields in Angular17

After receiving the first answer, I made some changes to the code. However, when testing it with Angular, I encountered several errors. How can I resolve these issues? TS: async otpRequest() { if ('OTPCredential' in window) { const ab ...

javascripthtmlangularangular-material

What is the process for transferring a file's contents to my server?

I am currently working on allowing users to import an OPML file that I parse server-side in my Rails application. However, I am facing difficulties as it appears that my server is not receiving the information correctly (neither the success nor error funct ...

javascripthtmlruby-on-railsajaxjquery

Concealing Redundant Users in Entity Framework

I am faced with the task of sorting through a database containing over 4000 objects, many of which are duplicates. My goal is to create a new view that displays only one instance of each element based on the first and last name. I have already implemented ...

javascriptjqueryhtmlentity-framework