CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
ahg8tOPk78
ahg8tOPk78

Reputation: 347

Using Bootstrap row class but can't get 2 forms being one under each other

I would like to put 2 forms in a web page, but one under the other. Like this:

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

As you can see both forms are using the .row class, but the are still inline when displaying the page.

I don't see what I am missing here.

Upvotes: 0

Views: 868

Answers (4)

Evgeny Kuznetsov
Evgeny Kuznetsov

Reputation: 2188

You should make structure like this:

<body id="Signup" class="row">//"row" should be a 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>

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

What you're doing is a little strange. Your best option is to create div rows and columns. Then inside of the divs define your forms. However, the real issue here is that you applied both row and column classes to the first form:

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

You can't do that, row and column must be defined separately:

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

    </div>
</div>

Upvotes: 1

dippas
dippas

Reputation: 60563

you are using .col-lg-6 along with .row should be child, and then use col-*-12 to have full width

also, you are missing .container as parent.

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

Upvotes: 3

Tha&#39;er AlAjlouni ثائر العجلوني
Tha&#39;er AlAjlouni ثائر العجلوني

Reputation: 15407

Replace the row col-lg-6 class from <form class="row col-lg-6"> with col-lg-12

Upvotes: 0

Related Questions