CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
stone rock
stone rock

Reputation: 1953

Cannot align bootstrap submit button in form?

I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.

In app.js:

    function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        `;
}

In index.css:

.form-group{
    padding-left: 30px;
    padding-right: 30px;
}

.form .btn-primary{
    padding-left: 30px;
}

I also tried to wrap submit button inside div tag but still no effect.

enter image description here

Upvotes: 1

Views: 93

Answers (3)

azs06
azs06

Reputation: 3517

Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.

Working example -

function editContact(id) {
    document.getElementById("editcontact").innerHTML = 
        `
        <form class="form">
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        `;
}

editContact(1);
.form{
  padding: 0 30px;
}
<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="editcontact">
      
    </div>  
  </body>

</html>

Notice, I added .form class, and adding to it. Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview

Upvotes: 0

jasinth premkumar
jasinth premkumar

Reputation: 1413

wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>

Upvotes: -1

Pandelis
Pandelis

Reputation: 1968

form .btn-primary{
    margin-left: 30px;
}

not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place

Upvotes: 3

Related Questions