Tips for organizing nested form rows with Bootstrap 4

I am currently working on a nested form row and I am looking to align the form fields vertically. The current output I am getting is shown below:

https://i.sstatic.net/NEWGY.png

Here is the code snippet:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
 <div class="card">
      <div class="card-body">
    
        <div class="form-group row">
          <label for="name" class="col-sm-3 col-form-label">Name</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="name" disabled>
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-3 col-form-label">Description</label>
          <div class="col-sm-9">
            <textarea class="form-control" id="description" rows="5" disabled></textarea>
          </div>
        </div>
        
        <div class="form-group row">
          <div class="col-sm-7">
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Rate</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Start date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">End date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
          
          <div class="col-sm-5">
            <div class="promotion-image-container">
              <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
            </div>
          </div>
        </div>
        
      </div>
    </div>

Upon review, there seems to be a slight misalignment in the columns. I am trying to align an image with the other 3 fields.

I have attempted to adjust the column numbers, but I am unable to achieve the desired alignment.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Applied a custom style adjustment padding-left:24px !important to div class='col-sm-7 padd-left', and it should now be functioning correctly.

@media only screen and (min-width: 768px) {
  .padd-left{
      padding-left:24px !important
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Rate</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Start date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">End date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>

  </div>
</div>

Answer №2

One issue is that the <label> elements have different width. The first two use .col-sm-3 while the last three use .col-ms-5. Even if you apply the same .col-* to all, they will still have varying widths due to nesting. (Refer to the first code snippet)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label bg-danger">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label bg-danger">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Rate</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Start date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">End date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

My suggestion is to enclose each <label> element in a container and apply .col-sm-auto and .col-12 directly to the container. Then, set a fixed width for the <label> to ensure uniform width. Use media queries for different widths based on viewport size.

Utilize .col-sm on the containers of <input> and <textarea> to occupy all available space. Use .col-12 for mobile.

@media (min-width: 576px) {
  label {
    width: 200px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="name" class="col-form-label">Name</label>
      </div>
      <div class="col-sm col-12">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="description" class="col-form-label">Description</label>
      </div>
      <div class="col-12 col-sm">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-12 col-sm-7">
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary ">
            <label for="description" class="col-form-label">Rate</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label">Start date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label ">End date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="co-12 col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/RzMzpR

Answer №3

Could you test out the changes I made to the code:

<div class="card">
    <div class="card-body">
        <div class="form-group row">
            <label for="name" class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="name" disabled>
            </div>
        </div>
        <div class="form-group row">
            <label for="description" class="col-sm-3 col-form-label">Description</label>
            <div class="col-sm-9">
                <textarea class="form-control" id="description" rows="5" disabled></textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class='col-3'>
                <div class="form-group"><label for="description" class="col-form-label">Rate</label></div>
                <div class="form-group"><label for="description" class="col-form-label">Start date</label></div>
                <div class="form-group">
                    <label for="description" class="col-form-label">End date</label>
                </div>
            </div>
            <div class='col-4'>
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
            </div>
            <div class='col-5'>
                <div class="promotion-image-container">
                    <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>
</div>

Feel free to check out the demo link here: https://codepen.io/phuongnm153/pen/zVWevP

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

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

htmlcssreactjsiconsstyled-components

My React project is not showing the text in the way that I had envisioned

When using the Material UI TextInput component with a placeholder prop set to display the text "Contraseña", I encountered an issue where the letter ñ was not rendering correctly and instead showing as \fx1. My HTML head section includes m ...

htmlreactjsmaterial-uibundlerparceljs

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

What is the best way to selectively add multiple classes to a single Material UI classes attribute based on certain conditions?

I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have ...

cssreactjsmaterial-ui

Craft an interactive Bootstrap 4 Accordion featuring content retrieved through an Ajax request

I am currently working on setting up a Bootstrap 4 Accordion. Utilizing an Ajax call to fetch the data, I can see the data being logged correctly in the console. My objective is to iterate through the data using a forEach loop and add a new card to the Acc ...

jqueryajaxtwitter-bootstrapbootstrap-4accordion

What are the best ways to customize exported and slotted components in Svelte?

Is there a similarity between Svelte slots and vanilla-js/dom functionality (I'm having trouble with it). In html/js, I can achieve the following: <style> body {color: red;} /* style exposed part from outside */ my-element::par ...

javascripthtmlsvelte

Insert an svg element into the content property

Is it possible to insert an SVG link within the content property? .selectedItem::before{ content: " any svg link "; ...

csscss-content

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

htmlangulartypescript

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

javascriptjqueryhtmlcss

406 error is triggered by GET parameters

Here is a PHP script I have: <!DOCTYPE html> <html lang="es-ES" xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES"> <head> <meta charset="iso-8859-1" /> </head> <body><p><?php if(isset($_GET['echo& ...

phphtml.htaccessutf-8get

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...

javascripthtmlcssbootstrap-4navbar

Connect a Bootstrap modal button with the submission of a Flask WTF form

I've implemented a form on my Flask web app and now I want to incorporate a modal dialog box to confirm the user's selection for my specific scenario. While I've managed to display the modal, I'm struggling to link the "confirm" button ...

flaskbootstrap-4bootstrap-modalflask-wtforms

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

javascripthtmlajaxjsonhtml5-video

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

I am trying to update the values of the orders placed by users on the Corporate's page without a refresh. I have implemented the jQuery .on method for this purpose. However, the values are being returned one by one from the array created for the order ...

javascripthtmlfirebasefirebase-realtime-database

Aligning Content in the Header

Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...

jqueryhtmlcsswordpress

Tips for combining text and an unordered list on the same line:

I attempted to align them in a single line, but they are not cooperating. The text floating to the left looks fine, however, the list that floats to the right is causing issues. I tried various methods to make them display inline, but they still appear sli ...

htmlcss

`Arranging miniature images within tabbed sections`

I have been implementing angularjs to render my HTML and utilizing bootstrap 3 for styling. While the tabs are rendering correctly, I am facing an issue where the images within each tab are not displaying in a grid layout; instead, they are being outputt ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

What is the best way to modify the appearance of the button?

I'm attempting to change the appearance of buttons at the top of a webpage to be square and blue. I have jQuery code for this purpose, but it doesn't seem to be functioning correctly. Here is the snippet of code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcssdom

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

htmlcss