Alignment of labels in Bootstrap for various form groups with error messages and required fields

How can I align a horizontal text box in the same row even though the label is on a different line?

<div class="row">
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="control-label">Roll number <br> Student Code:</label>
                          <input type="text" class="form-control">
                          </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label">School code:</label>

                            <input type="text" class="form-control ">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label>Year Of Passing:</label>
                          <input type="text" class="form-control">
                      </div>
                </div>
            </div>
htmlcssbootstrap-4

Answer №1

To style the input and label, you can use the classes w-50 d-inline-block for the input and w-25 for the label like this

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="control-label w-25">Roll number <br> Student Code:</label>
                          <input type="text" class="form-control w-50 d-inline-block">
                          </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="w-25">School code:</label>

                            <input type="text" class="form-control w-50 d-inline-block">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="w-25">Year Of Passing:</label>
                          <input type="text" class="form-control w-50 d-inline-block">
                      </div>
                </div>
            </div>

Answer №2

To create a formatted input layout, wrap the input in a div with the col-x attribute and add the row class to form-group. Here's an example:

        <div class="form-group row">
            <label class="control-label col-4">Roll number <br> Student Code:</label>
          <div class="col-6">
            <input type="text" class="form-control">
          </div>
        </div>

For the complete example, visit: https://stackblitz.com/edit/js-bootstrap-css?file=index.html

<div class="row">
                <div class="col-12">
                <div class="form-group row">
                    <label class="control-label col-4">Roll number <br> Student Code:</label>
                  <div class="col-6">
                    <input type="text" class="form-control ">
                  </div>
                </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-3 col-lg-4">
                    <div class="form-group row">
                        <label class="control-label col-4">School code:</label>

                  <div class="col-6">
                            <input type="text" class="form-control ">
                  </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group row">
                        <label class="control-label col-4">Year Of Passing:</label>
                  <div class="col-6">
                          <input type="text" class="form-control">
                  </div>
                      </div>
                </div>
            </div>

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

What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...

cssmedia-queries

The <map> <area> element functions properly only in webkit browsers

Here is some HTML code: <div id="wrap"> <div id="main-content"> <div class="container"> <h1 class="logo">Mysite</h1> <img id="links" src="images/links.png" usemap="map" width="946" heigh ...

html

Moving and referencing data in a table row

I am currently working with a table structured like this <tbody> <?php while($row = $result->fetch_assoc()) : ?> <tr> <td style="display:none"><?php echo $row[& ...

javascriptphphtmlmysql

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

javascripthtmlcssangularjsangularjs-animation

Ways to add margin-top to a card element without affecting the entire container-fluid

I'm attempting to change the background image of this container, but when I add margin-top to the card element, it shifts everything over the picture. Below is my Bootstrap4 code: #card.container-fluid { background-image: url("../images/picture2. ...

htmlcssbootstrap-4

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

javascriptphphtmlcsswordpress

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

phpjqueryhtmlajaxtinymce

Node.js is causing issues with the functionality of Bootstrap carousel controls

I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...

htmlnode.jsbootstrap-4carouselejs

Ways to ensure that a div's height matches its width

Is there a way to make three divs, each with the CSS property display:inline-block, have a 1:1 ratio of width to height using only CSS? Currently, the width is set to 30% and the height to 75%, causing the width to be greater than the height. #our_servi ...

htmlcss

the border only partially encasing the div

In this snippet of code, the structure is not fully encapsulated within the div element. There are two child divs positioned in a row format. Bootstrap and inline CSS styles have been utilized for the CSS styling. This particular code segment pertains to a ...

htmlcssbootstrap-4

Regarding the presentation, we should ensure that we include the initial image from the slideshow at the beginning of the

I am encountering a problem with the images in the slideshow getting listed. I want to display only the first image in the list when the code is run, and have the rest of the images appear manually through clicking. Any assistance regarding this issue wou ...

javascripthtmlcssslideshow

Combining days and months in a date time using PHP

I am looking to create a textBox where users can input a date and time, followed by selecting an option from a dropdown menu that triggers a calculation. For instance: if ($exampleMonth === 11 && $exampleDay > 30) { $exampleMonth = 12; ...

phphtmldropdown

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

javascriptjqueryhtmlcssangular

relocate the image with an identical filename stored in the variable

Having trouble moving an image to a new position when clicking on its small thumbnail. I've attempted using jquery's find() function but it doesn't seem to be working... $('#slide1_controls img').click(function (event){ var sr ...

jquerycss

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

htmlcssfrontend

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma

Create HTML code automatically from JSON data

Currently, I am in the process of developing a template system. The concept is that an ordinary user can create a JSON file which will then be used by the system to automatically generate HTML code. However, I am facing some challenges and feeling a bit lo ...

javascripthtmljsontemplates