Is there a way to align a grid next to a label?

I'm attempting to create the layout shown below:

https://i.sstatic.net/4qI7R.png

However, I am facing a challenge with this:

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

I am utilizing Bootstrap. Here is my HTML code:

<div class="metrics-group">
          <p>Revenue</p>
          <div class="form-group">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="6month_old_revenue">6 months ago</label>
                  <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="5month_old_revenue">5 months ago</label>
                  <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="4month_old_revenue">4 months ago</label>
                  <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
                </div>
            </div>
            <div class="row traction-row>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="3month_old_revenue">3 months ago</label>
                  <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="2month_old_revenue">2 months ago</label>
                  <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="1month_old_revenue">1 month ago</label>
                  <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
                </div>
            </div>
        </div>
</div>

Any suggestions on achieving the layout illustrated in the first image?

htmlcssbootstrap-4

Answer №1

Below is the necessary code snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <p class='col-xs-2' style='text-align: center;'><br/><br/><br/>Revenue (R$)</p>
  <div class="form-group col-xs-10">
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">6 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">5 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
     
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">4 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">3 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">2 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">1 month ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
  </div>
</div>

Answer №2

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="form-group">
        <div class="row">
            <div class="col-lg-3">
                <p>Revenue (R$)</p>
            </div>
            <div class="col-lg-9">

                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="6month_old_revenue">6 months ago</label>
                        <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="5month_old_revenue">5 months ago</label>
                        <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="4month_old_revenue">4 months ago</label>
                        <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
                    </div>
                </div>
                <div class="row traction-row">
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="3month_old_revenue">3 months ago</label>
                        <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="2month_old_revenue">2 months ago</label>
                        <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label for="1month_old_revenue">1 month ago</label>
                        <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
                    </div>
                </div><!--close inner row -->

            </div> <!--close col-9 -->
        </div> <!--close row -->
    </div> <!--close form-group -->

Answer №3

Utilize a row featuring dual columns

Employ a row with two columns: one designated for the revenue paragraph and the other for the input groups. To ensure proper alignment of the revenue paragraph within its container, apply the following classes:

  1. d-flex - to convert its display styling to flex
  2. align-items-center - for vertical centering within the container
  3. justify-content-center - for horizontal centering within the container

If vertical centering is desired specifically on sm screens, make use of align-items-sm-center.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div class="container metrics-group">
  <div class="row">
    <div class="col-4 d-flex align-items-center justify-content-center">
      <p>Revenue</p>
    </div>
    <div class="col">
      <div class="row">
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="6month_old_revenue">6 months ago</label>
          <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="5month_old_revenue">5 months ago</label>
          <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="4month_old_revenue">4 months ago</label>
          <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
        </div>
      </div>
      <div class="row traction-row">
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="3month_old_revenue">3 months ago</label>
          <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="2month_old_revenue">2 months ago</label>
          <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="1month_old_revenue">1 month ago</label>
          <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
        </div>
      </div>
    </div>
  </div>

</div>

The form-group container has been omitted in the provided code because it solely adds bottom margin without additional functionality. It is advisable to utilize the form-group class name for the input columns to maintain spacing beneath the inputs.

Latest Update

At present, both columns are displayed uniformly across all devices. Tailor the implementation using appropriate col-* classes as per your design preference, instead of hardcoding col-4 and col.

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 php code to fail to trigger an alert when using Ajax technology?

As a novice in web programming, I have successfully created a website but now I am facing challenges while trying to integrate a database. Despite having everything properly set up, my ajax function doesn't seem to be working and I can't figure o ...

javascriptphphtmlajax

Leveraging the power of Django framework with valid HTML 4.01 Strict

I stumbled upon a similar inquiry here, however, I am seeking broader solutions. Currently, Django generates HTML with self-closing tags like <br /> instead of <br> when creating forms. While <br /> is valid in XHTML and possibly HTML5, ...

djangoxhtmlhtmldjango-formshtml4

There is a lag in the loading of css stylesheets

We created a single-page company website that utilizes three different stylesheets connected to the index.html. By clicking a button, users can switch between these stylesheets resulting in changes to colors, images, and text colors. However, Issue 1: The ...

javascripthtmlcssdelayvisual-glitch

HTML5 Device Orientation Emulator

Is there a tool to simulate device orientation for an HTML 5 interpreter (also known as a web browser)? I have been experimenting with the DeviceOrientation Event Specification in HTML 5 and I have successfully coded an example that works on my Android sm ...

htmlfirefoxandroid-emulator

Showing JSON data using CSS and HTML

Hello there! I've come across a coding hurdle today. I attempted to retrieve JSON data from a URL using the following PHP code snippet: <?php $url = "http://services.faa.gov/airport/status/LAX?format=json"; $ch = curl_init(); curl_setopt($ch,CURL ...

phpcssjson

Troubleshooting a problem with scrolling functionality while keeping the header in place and ensuring the correct tab is highlighted

I've successfully created a page with a fixed menu that appears when scrolling, and the tabs activate based on their corresponding section IDs. However, I'm encountering some issues: The scrolling behavior is not precise; when scrolling to sec ...

javascriptjqueryhtml

What are some ways to retain data while navigating between different online pages?

Can anyone provide guidance on how to maintain the contents of a shopping cart as I navigate between pages, all without losing the information? Is this achievable using solely JavaScript? ...

javascripthtml

Is it acceptable to display certain IDs in HTML?

Is it acceptable to structure an HTML page like the following: ... <div id='some_id' lesson_id='313'> ... </div> ... And then in jQuery simply retrieve the lesson_id: lesson_id = $("#some_id").attr("lesson_id") // make A ...

jqueryhtmlajax

JSON parsing error within the HTML Sidebar list

I have a JSON file that contains data I need to parse in order to display information in my sidebar. When a user clicks the button labeled "List all sessions", the goal is to showcase all of the available session details grouped by Session ID and location. ...

javascriptjsonhtml

What are some ways to use CSS to customize the appearance of a "D-PAD" controller?

Example of a completed DPAD body { background-color: black; margin: 0; padding: 0; overflow: hidden; } div#controller { display: none; } div#instructions { font-size: 20px; color: white; position: static; text-ali ...

htmlcss

Tips for dynamically adding table columns and rows while ensuring the proper number of cells each time

I am currently working on dynamically adding rows and columns to a table using jQuery. My research has led me to successfully add columns with the correct number of rows and remove entire rows. However, I am facing a challenge in adding a row with the corr ...

javascriptjqueryhtmlhtml-table

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Here is the HTML code I am using to input prompts into a chatbot: <div class="input-group mb-3"> <input type="text" class="form-control" id="chat-input"> <div class="input-group-append ...

javascripthtmlbootstrap-5

"During the Angular Controller operation, the variable $scope.fId is displaying a

I need help using the input value fId in my Angular controller FollowBtnCtrl. I have created a button that calls the followMe() function, which is defined inside the FollowBtnCtrl controller. However, when I try to access the $scope.fId value within the co ...

javascripthtmlangularjscontrolleronsen-ui

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

The alignment of data-table columns appears to be off to the right

Currently, I am working on data-tables and have successfully created one. However, I am facing an issue with aligning the data to the right of some columns. Snippet: var data=[ { "amount": 518212, "billdate": "2018-08-04", "outlet": "JAYA ...

javascriptdatatablesbootstrap-4

What steps can I take to modify this script in order to display one image on top of another?

I am working on a script that creates cross fades for images. However, I have some text images that I would like to appear as fading in on each image transition. This means that when the first image appears, it will pause, then the text image will fade i ...

jqueryhtmlfadein

What is the reason for Safari using different fonts on iPad compared to Mac?

Whenever I access our website through Safari and need Github authentication, I encounter this issue: Please check the code snippet below: Make sure to configure these settings: .breadcrumb-link { font-family: SFPro-Medium; font-size: 22px; co ...

cssiosmacos

Dynamic jQuery slideshow with unique starting point

My photo collection is displayed in a list format like this: <ul class="slideshow"> <li><img src="images/slideshow/slide0.jpg" alt="" /></li> <li><img src="images/slideshow/slide1.jpg" alt="" /></li> & ...

javascriptjqueryhtmlrandom

Retrieve all tag elements within another tag in a recursive manner

In my HTML document, there is a <div id = "main"> element. This div can contain multiple levels of nodes, with varying structures as the document content is created by the user. I am looking to implement a JavaScript function that will retrieve all n ...

javascripthtml

Try utilizing the adjacency selector in Less again

Is it feasible to repeat this pattern an unlimited number of times using Less with the provided CSS selectors? I've been looking into using loops, however, I haven't come across any examples that achieve a similar result. .page-section { ba ...

cssless