Struggling to stack two forms on top of each other within a Bootstrap row class

I am trying to incorporate 2 forms on a web page, one below the other. Here is what I have:

  <body id="Signup">


      <form class="row col-lg-6">

       <legend>Légende</legend>

          <div class="form-group">   
            <label for="text">Text : </label>
            <input id="text" type="text" class="form-control">
          </div>

          <div class="form-group">
            <label for="textarea">Textarea : </label>
            <textarea id="textarea" type="textarea" class="form-control"></textarea>
          </div>

          <div class="form-group">
            <label for="select">Select : </label>
              <select id="select" class="form-control">

                <option>Option 1</option>

                <option>Option 2</option>

                <option>Option 3</option>

             </select>
          </div>
        <br>
        <button>Envoyer</button>

      </form>



      <form class="row">formulaire</form>


  </body>

Although both forms have the `.row` class, they are not displaying in a stacked manner on the page.

I'm unsure of what I might be overlooking here.

Answer №1

It is recommended to use .col-lg-6 within a .row as a child element, and then utilize col-*-12 for full width.

Additionally, make sure to include a parent element with the class .container.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="row">
    <div class="col-xs-12">
      <legend>Légende</legend>

      <div class="form-group">
        <label for="text">Text :</label>
        <input id="text" type="text" class="form-control">
      </div>

      <div class="form-group">
        <label for="textarea">Textarea :</label>
        <textarea id="textarea" type="textarea" class="form-control"></textarea>
      </div>

      <div class="form-group">
        <label for="select">Select :</label>
        <select id="select" class="form-control">

          <option>Option 1</option>

          <option>Option 2</option>

          <option>Option 3</option>

        </select>
      </div>
      <br>
      <button>Envoyer</button>
    </div>
  </form>



  <form class="row">
    <div class="col-xs-12">formulaire</div>
  </form>
</div>

Answer №2

The approach you're taking seems a bit unconventional. A better way to structure your layout would be to use divs for rows and columns, placing your forms inside them accordingly. It appears there is an issue with how you've assigned both row and column classes to the first form element:

<form class="row col-lg-6">

It's important to note that the row and column classes should be applied separately as shown below:

<div class="row">
    <div class="col-lg-6">

    </div>
</div>

Answer №3

Switch out the row col-lg-6 styling of

<form class="row col-lg-6">
for col-lg-12 instead

Answer №4

To create a proper structure, follow this format:

<body id="Signup" class="row">//"row" should serve as the parent to columns

  <form class="col-lg-12"> //width:100% or col-lg-6 for width: 50%
  
    ...
  
  </form>
  
  
  
  <form class="col-lg-12">formulaire</form>

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

Alter the background shade of an item as it is added or removed from a multi-select list and transferred to another list

Is there a way to visually represent the movement of items between two multi-select lists? I have one list on the right and one on the left, and when objects move from right to left, I want them to have a red background (indicating removal) and if they mov ...

Issue with CSS 3 gradient compatibility in Internet Explorer 8

My CSS3 gradient button is working perfectly on all browsers except for IE8. To make it work on IE8, I am utilizing CSS3 Pie. You can see the search button in action by visiting: Upon inspecting my console, I noticed an error on this line: PIE.htc, lin ...

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

Is creating an expanding tab in CSS a difficult task?

I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...

Should the potential benefits of implementing Responsive Design in IE8 be taken into account in 2013?

It seems that there are still questions lingering about how to make responsive design compatible with outdated browsers like IE8 or even the dreaded IE7. Personally, I question the need for implementing responsive design specifically for IE8, considering ...

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

Using a .NET Web-API controller variable as a parameter in a JavaScript function

I am looking to send a "variable" from the controller to a JavaScript function. The code I have implemented is as below: <div ng-controller="faqController"> <div ng-repeat="c in categories"> <h2 onclick="toggle_visibility(&apos ...

Establish the minimum and maximum values for the text field depending on the selection made in the previous dropdown menu

For my project, I need to create a dropdown menu and a text box positioned next to it. I want the text box to have specific character limits based on the option selected from the dropdown. For example, if "Option 1" is chosen, then the textbox should only ...

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

Ways to alter the CSS class of individual labels depending on the content of textContent

In my HTML template, I'm using jinja tags to dynamically create labels from a JSON object. The loop responsible for generating this content is detailed below. <div class="card mb-0"> {% for turn in response %} <div class="card-he ...

Access the inner element with Selenium WebDriver in Java

Looking for a way to automate clicking the 'Download' button on a pdf-viewer page using Selenium? Check out this html code snippet from the page: https://i.sstatic.net/5qUtT.png To access the element enclosed within the red frame, you may need t ...

Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below? $('#myRange').on('input', function() { var nn = $(this).val(); $("img").css({ 'clip': ...

Querying the height of an image element using jQuery and dynamically adding padding if necessary

I've got a Bootstrap carousel displaying images with different heights, and I'm looking to vertically center these images. My approach involves determining the image height, subtracting it from a fixed height value, and if the result is less than ...

Darkening the background of HTML and CSS text to black

I'm having trouble removing the black background from the navigation. It doesn't appear to be styled in black when I inspect each element individually. Here is an image showing the issue: https://i.stack.imgur.com/gvbn8.png @charset "UTF-8"; ...

Guide on implementing gradient animation effects in a React component

How can I implement gradient animation effects like this example in a React component using inline CSS? I need to utilize the CSS-based gradient animation effects shown below directly within the React component. Are there any specific packages available ...

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

When the resolution changes, the text shifts away from the bar in CSS

When I adjust the resolution of my display, the text on my top bar also changes. Can anyone help me fix this issue? In normal view: With changed resolution or smaller browser window: This is my HTML code: <body> <div class="top-panel"> ...

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...