Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
          <br>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">User</label>
            <div class="col-sm-6">
              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
            </div>
            <div class="col-sm-5, small" style="padding-left: 18px">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-md-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            <div class="col-sm-5" style="padding-left: 18px">
              <div class="row">
                <div class="col-sm-12, small">
                  Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
                  "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            <div class="col-sm-5, small" style="padding-left: 18px">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

Encountering issues when the screen width is reduced, where rows with multiple lines are not behaving as expected. For example:

1. Label (Purpose) position changed:

2. No text padding:

Update:

Discovered that the issue of 1. Label (Purpose) position changed stems from using col-md-1 for the purpose label. Switching it to col-sm addresses the problem. Here's the updated version:

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
        <br>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">User</label>
            <div class="col-sm-6">
              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
            </div>
            
            <div class="col-sm-5 small" style="padding-left: 3px">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small" style="padding-left: 3px">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small" style="padding-left: 3px">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

The remaining issue now is the text padding. While padding-left 3px works well in full-screen mode, it's not ideal when the screen size decreases:

htmlcsstwitter-bootstrap

Answer №1

Your class attributes shouldn't have commas, as this is incorrect and causes the subsequent classes not to apply correctly. Once you remove them (along with any inline styles), everything should function as intended.

The nested row structure isn't necessary. I've taken that out, along with the unnecessary line break which was not contributing to the layout in any way.

By default, Bootstrap shifts inputs below labels on mobile screens (xs) to accommodate narrower displays. It's advisable not to change this behavior, but if needed, simply use col-xs-* instead of col-sm-* to address the smallest screen breakpoint without disregarding it.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">User</label>
            <div class="col-sm-6">
              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
            </div>
            
            <div class="col-sm-5 small">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-md-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

Answer №2

By simply applying padding-right: 3px to the input elements, I was able to resolve my padding issue:

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
        <br>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">User</label>
            <div class="col-sm-6"  style="padding-right: 3px">

              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
              
            </div>

            <div class="col-sm-5 small">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6"  style="padding-right: 3px">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6"  style="padding-right: 3px">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

Answer №3

Give this a shot

<div>
    <section class="content container-fluid">
   <form id="submitForm">
        <fieldset>
        <br>
        <div class="form-group row mb-2">
            <label for="userId" class="col-sm-1 col-form-label">User</label>
            <div class="col-sm-6">
                <select class="form-control" id="userId">
                    <option value="1">Alex</option>
                    <option value="39">Kent</option>
                    <option value="6">Nick</option>
                </select>
            </div>
            <div class="col-sm-5 small">
                If your name is not listed, please contact the Officer.
            </div>
        </div>  
        
        <div class="form-group row mb-2">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
                <input type="text" id="purposeNames" class="form-control" placeholder="Purpose"  />                    
            </div>
            <div class="col-sm-5" style="padding-left: 18px">
                <div class="row">
                   <div class="col-sm-12, small">
                    Feel free to select more than one purpose per ticket e.g. email + instant messaging.
                    Such combinations will only proportionally affect purpose statistics.
                    Please do not use online time that was initially requested for purposes of the category "Not affecting personal quota"
                    (e.g. chores) also for checking personal emails, instant messaging etc.
                    Instead, request separate access by selecting the desired purpose category e.g. email; instant messaging etc.                  
                   </div>
               </div>
            </div>          
        </div>  
        
        <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            <div class="col-sm-5 small" style="padding-left: 18px">
                Use a combination of letters, symbols & numbers.
            </div>
        </div>  
      </fieldset>
    </form>
  </section>
</div>

Answer №4

Wrap the text in a div tag and apply the CSS property overflow: hidden to hide any overflowing content.

<div class="col-sm-5, small" style="padding-left: 18px">
    <div class="sample">
        Make sure to select multiple purposes per ticket such as email + instant messaging if needed.
        These combinations will only impact purpose statistics proportionally.
        Avoid using online time initially allocated for categories like "Not affecting personal quota" (e.g. chores) for personal tasks like checking emails or messaging.
        Instead, request separate internet access based on the specific purpose category chosen like email; instant messaging, etc.
    </div>              
</div>

CSS:

.sample
{
    overflow: hidden;
}

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

Troubleshooting the mysterious provider problem in Ui-router

I encountered this error message: "Module 'ui-router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument." Interestingly, I have i ...

htmlangularjsangular-ui-router

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...

htmlcsscentering

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

javascripthtmlruby-on-railsruby

Video tag with centered image

For a current project, I am in need of rendering a centered image (a play button) at runtime on top of a video based on the UserAgent. If the userAgent is not Firefox, I want to display the image as Firefox has its own playEvent and button on top of the vi ...

javascripthtmlcssvideo

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...

javascripthtmlcssstring

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Padding has not been recognized as a valid input value

I'm struggling with getting padding to be accepted by the browser when I style a card using Material-UI. const useStyles = makeStyles((theme) => ({ cardGrid: { padding: '20px auto' }, })) Unfortunately, the browser is not recogni ...

htmlcssreactjs

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

htmlcsschartsgoogle-visualization

React Fixed Footer Implementation against My Preferences

Here's an issue that I'm facing: https://i.stack.imgur.com/gtQqm.png The footer on my webpage is normally displayed at the bottom of the page. However, when the user performs certain actions that extend the size of the page: https://i.stack.im ...

htmlcssreactjsfooterfixed

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

javascriptjqueryhtmlcssdom

Unable to change Bootstrap variables within a Next.js project

I'm having trouble changing the primary color in Bootstrap within my NextJS project. I've tried different methods but nothing seems to work as expected. Here is the code snippet from my "globals.scss" file that I imported in "_app.js": $primary: ...

htmlcsstwitter-bootstrapsassnext.js

Adjust the size of the div container while ensuring that all elements are aligned horizontally

My goal is to design a page where all elements remain perfectly aligned, even when the user resizes the window. However, the code I have written does not achieve this. <div style="display:flex; justify-content: left; padding: 3px;"> <div style="m ...

htmlcss

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

javascriptjqueryhtmlcss

Warning: The username index is not defined in the file C:xampphtdocsindex.php at line 4

Hey there, I just wanted to express my gratitude for taking the time to read this. It's all part of a college assignment (web server scripting unit p4) where I am working on setting up a simple login system. Unfortunately, I keep running into an error ...

phphtmlforms

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Currently, my main goal is to extract and save a single image from a website post logging in. After examining the image, I discovered that it has a full xpath of /html/body/form/main/div/section/div[1]/div/div[2]/div/img. My plan is to utilize beautiful so ...

htmlcssselenium-webdriverbeautifulsouptesseract

`The logo does not dim when the popup is displayed`

I'm currently experiencing an issue with pop-ups on my page - when they appear, they create a shade over all elements of the page except for my two logos and are displayed with a border around them. Here's what my page looks like before the popu ...

javascriptcssreactjsimagepopup

Refreshing a specific div within an HTML page

I am facing an issue with the navigation on my website. Currently, I have a div on the left side of the page containing a nav bar. However, when a user clicks a link in the nav bar, only the content on the right side of the page changes. Is there a way t ...

javascriptjqueryhtmlcss