What is the best way to prevent input fields from wrapping onto a new line in a Bootstrap 4 inline form layout?

I am facing an issue with my inline form where the input fields are wider than the screen, causing some of them to fall onto a new line.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fce6fde6fb">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Inline form</h1>

  <div class="container-fluid">
    <div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
      <form>
        <div class="form-row">
          <div class="col-2">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col-2">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col-2">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col-2">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>

          <div class="col-2">
            <label for="">Address</label>
            <input type="text" class="form-control" placeholder="Address">
          </div>
          <div class="col-2">
            <label for="">Phone Number</label>
            <input type="text" class="form-control" placeholder="Phone Number">
          </div>

          <div class="col-2">
            <label for="">Email</label>
            <input type="text" class="form-control" placeholder="Email">
          </div>
          <div class="col-2">
            <label for="">Website</label>
            <input type="text" class="form-control" placeholder="Website">
          </div>

        </div>
      </form>
    </div>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258435845">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

Due to the limitation that each bootstrap column should not exceed 12 columns in width per row, I am looking for a solution to have all these fields in a single row with a scroll bar.

Despite setting 

flex-wrap: nowrap; overflow-x: scroll;
to the .row class, it is still causing issues. Any help would be appreciated.

cssbootstrap-4

Answer №1

To achieve this, simply add the flex-nowrap class to the .form-row div.

<!doctype html>
<html lang="en>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323574d564d50">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Inline form</h1>

  <div class="container-fluid">
    <div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
      <form>
        <div class="form-row flex-nowrap">
          <div class="col-2">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col-2">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col-2">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col-2">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>

          <div class="col-2">
            <label for="">Address</label>
            <input type="text" class="form-control" placeholder="Address">
          </div>
          <div class="col-2">
            <label for="">Phone Number</label>
            <input type="text" class="form-control" placeholder="Phone Number">
          </div>

          <div class="col-2">
            <label for="">Email</label>
            <input type="text" class="form-control" placeholder="Email">
          </div>
          <div class="col-2">
            <label for="">Website</label>
            <input type="text" class="form-control" placeholder="Website">
          </div>

        </div>
      </form>
    </div>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69288938895">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

Adjust the col-2 class to simply col and watch as everything aligns on a single line.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e5fefdfedbdccddcdfcf9fffaeedcccdee">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <title>Greetings, universe!</title>
</head>

<body>
  <h1>Streamlined form</h1>

  <div class="container-fluid">
    <div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
      <form>
        <div class="form-row">
          <div class="col">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>

          <div class="col">
            <label for="">Address</label>
            <input type="text" class="form-control" placeholder="Address">
          </div>
          <div class="col">
            <label for="">Phone Number</label>
            <input type="text" class="form-control" placeholder="Phone Number">
          </div>

          <div class="col">
            <label for="">Email</label>
            <input type="text" class="form-control" placeholder="Email">
          </div>
          <div class="col">
            <label for="">Website</label>
            <input type="text" class="form-control" placeholder="Website">
          </div>

        </div>
      </form>
    </div>
  </div>


  <!-- Optional JavaScript; pick one of these! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaebdbcbfadb2b1b391f6ecf7ece1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

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 a CSS overflow problem in the main slider

While exploring the website , I encountered a minor issue. When I added "overflow: hidden" to the featured slider div, the images appeared stacked if JavaScript was enabled or the user's internet connection was slow. However, a new problem has arisen ...

htmlcssoverflow

A guide to transforming rows into columns with CSS

Hello, I am trying to convert rows into columns using CSS. Currently, my code looks like this: <style> .flex-container { max-width: 500px; width: 100%; display: flex; flex-wrap: wrap; } .flex-item { ...

htmlcss

Rearranging anchor tag order with the power of JQuery

Imagine I have five anchor tags <a id = "A" class = "Home">Home</a> <a id = "B" class = "Maps">Maps</a> <a id = "C" class = "Plans">Plans</a> <a id = "D" class = "Community">Community</a> <a id = "E" clas ...

javascriptjqueryhtmlcss

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

javascripthtmlcss

What is the best way to align a div right below an image that has been clicked on?

I am designing a website that features social media icons spread out horizontally across the page. When a user clicks on one of these icons, I envision a pop-up window appearing below it, displaying additional information. Here is a visual representation o ...

javascriptjqueryhtmlcss

Require the header text to appear black on a white background and white on a dark background

As someone who is not experienced in coding, I have tried multiple methods without success. It seems like none of the solutions available are compatible with my Squarespace theme. Any assistance you can provide would be greatly appreciated! Here is a link ...

css

Adjust Font Size inside Circular Shape using CSS/jQuery

I have been searching for different libraries that can resize text based on the size of a container. However, my container is circular and I am facing difficulty in preventing the text from overflowing beyond the border. Below you will find a Fiddle conta ...

htmlcss

Lean/Tilt just the lower portion of the division

I have been experimenting with adding a unique slant to the bottom of a div. Progress has been made, as shown in the example below where I successfully applied the slant to some elements on the page. Currently, the slant is visible on both the top and bot ...

csswordpressskewrevolution-slider

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; } Html <div class="form-check d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" value=&quo ...

cssbootstrap-5

CSS: The enigma of :nth-child - what eludes my understanding?

I have 2 divs which are similar to 2 td's in a table. My goal is to have 2 red divs, followed by 2 blue divs and so on. However, my current code doesn't seem to be working. Can someone point out what I am missing: <style> .irow :nth-child( ...

htmlcsscss-selectors

My DIV is not floating to the right as expected. What could be the issue?

I'm having trouble positioning the timer to float on the right top side of the logo. Even though using the regular style="float:right" works perfectly... <div id="whole_page" /> <div id="header" /> <?php echo " ...

csshtml

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

javascripthtmlcssreactjsweb

When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: .hslide-item {width: 100%}; The script started ignoring the entire div width. I am looking for a solution where the .hslide-item ca ...

javascriptjquerycss

My element is not being animated by Elementbyclass

Without Using JQUERY The animation I'm trying to create isn't functioning properly. I attempted to utilize document.getElementsByClassName, but it's not working as expected. There are no errors, but the element is not animating correctly. ...

javascripthtmlcssdom

Click on every sublist within the unordered list items

In this coding example, there are multiple ul and li elements. Upon running the code, you will observe that test1 is positioned 10px from the left as it is nested within TEster, but achieving an additional 10px offset for Tester2 appears to be a challenge ...

htmlcss

Personalize your hr tag

https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...

css

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Looking to create a bootstrap modal with a unique layout? Interested in having two columns that can be scrolled separately? body, html { font-size: 10px } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

Delete any classes that start with a specific prefix

Within my code, there is a div that holds an id="a". Attached to this div are multiple classes from different groups, each with a unique prefix. I am uncertain about which specific class from the group is applied to the div in JavaScript. My goal is to r ...

javascriptjquerycss

Step-by-step guide to achieving a File div effect using CSS

Wondering how to achieve this specific effect within a div using CSS? click here for visual reference I attempted it using the before and after elements, but I struggle with these tags: check out this image for details Apologies if my question is unclear ...

css