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:

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

2. No text padding:

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

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:

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

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

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;
}

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

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

A step-by-step guide on revealing a complete div upon selection

Can anyone assist me in showing a div with a form inside it whenever a specific option is selected from a tag? Here is the code I currently have: <script type="text/javascript"> $(function() { $('#contactOptionSelect&apo ...

javascriptjqueryhtml

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

Navigating through cpanel to interact with a Button using Selenium in Python

Unable to select the new folder option. Here is what I have attempted: driver.find_element_by_id("li.action-newfolder") driver.find_element_by_xpath("//[a(text(), 'New Folder')]").click() Unfortunately, neither of these methods are successful. ...

pythonhtmlselenium

Using PHP to wrap text based on the language at hand

I'm facing an issue with a small area (div or span) that can only display one to five words at a time. The problem arises when certain lengthy words like "muziekgeschiedenis" exceed the boundaries of this limited space. Is there a way in PHP to wrap s ...

phphtmlcssword-wrap

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

javascriptcssreactjsnext.js

validating links in Laravel

Is it feasible to validate a href element in laravel? For instance, I have various user responses in my guest book and each user has the capability to delete their posts. The deletion process is as follows: <div class="col-lg-2"> <ul class="l ...

phphtmllaravel

Preventing scrolling on a YouTube video embed

I have been working hard on developing my personal website. One issue I encountered is that when there is a YouTube video embedded in the site, it stops scrolling when I hover over it. I would like the main document to continue scrolling even if the mouse ...

javascriptjqueryhtmliframeyoutube

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

jqueryhtmllaravellaravel-4

Yii ReCaptcha for better mobile compatibility

Incorporating the extension from http://www.yiiframework.com/extension/recaptcha/ into my Yii project has been a successful endeavor thus far. However, in an effort to enhance the responsiveness of my website, I recently made some modifications to the cod ...

cssyiirecaptcha

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

javascriptjqueryhtmljquery-ui

Clicking on an element in the Dropdown Form will directly redirect you to a link, without the need to press a

I'm having trouble with my dropdown form. I want the user to be directed to a specific URL when they click on an element, without needing to hit a submit button. Below is the code I've been working with: <select name="mydropdown" class="style ...

htmlforms

Tips on how to prevent a video from playing in the background of a popup even after it has been closed

After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in ...

jqueryhtmlcss

Breaking down a jQuery array into separate JSON objects

Hi there, I am currently working on constructing a post request. Here is the format I need to send: const data = { categories: [ { id: 9 }, { id: 14 } ], } However, what I have is ["29", "23", "22&quo ...

htmljquery

Angular Components unexpectedly lose background transparency when using Transparent-Background-PNG in the foreground

Hey there! I'm currently working on a landing page and I have this amazing idea to use a stunning picture of clouds with a transparent background layered over a beautiful landscape. The only problem is that when I try to implement it, the transparency ...

cssangularangularjspngtransparent

How can we modify the elements within an Object tag in HTML? If it is achievable, what is the process?

I am working on a project involving an HTML page that includes content from an external website using an HTML object tag as shown below: <object data="someUrl-on-different-domain-than-host" type="text/html"></object> My goal is to use jQuery ...

javascriptjqueryhtml

What is the jQuery plugin that can search for elements and display them in real-time within a DIV?

Currently, I am in search of a jQuery plugin that can assist me with the following: Ability to have an input field for user search text Search through my elements and display only those that match the search string entered by the user. Essentially creati ...

jqueryhtmlsearchpluginsnavigation

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

javascriptjqueryhtmlinputdisabled-input

What are the steps to changing the navbar's color when scrolling down?

I am having trouble changing the color of my navigation bar from transparent to black after the user scrolls down. Despite trying various methods and watching tutorials, I can't seem to get it to work. HTML <nav role='navigation' class= ...

javascripthtmlcss

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

javascripthtmlcsshttp-status-code-404replit