Reputation: 2268

Spacing Evenly Elements of a Form in Bootstrap

I have the following todolist web app, and I'm trying to space the two inputs and the button evenly. But I can't figure out by inspecting the elements in the form what element has a margin or padding that pushes the button further down. The form has three elements two inputs and one button. I want the three evenly spaced. If you can let me know how to fix this appreciated.

Link to webapp: http://pctechtips.org/apps/todo/

Code:

body {
  margin: 0 auto;
  height: 100vh;
  color: white;
  /*display: flex;*/
  background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}

.navbar-brand {
  color: white;
}

.add-item {
  font-size: 2em;
  margin: 0 auto;
  border-radius: 30px;
}

.list-group {
  color: gray;
  font-size: 18px;
}

<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
    <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
  </nav>
  <!-- /navbar -->
  <!-- todoList -->
  <div class="container">
    <div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
      <a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
      <div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
        <form class="mb-4">
          <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
          </div>
          <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
        </form>
      </div>
      <!-- horizontal line -->
      <hr>
      <!-- list items -->
      <h1 class="heading-4">Todo List Items</h1>
      <ul class="list-group mt-4 pb-4">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
  </div>

Upvotes: 2

Answers (3)

manuxi

Reputation: 352

It seems that the .add-item class manipulates the button.

You can try

css:

.test {
    font-size: 1rem;
}
.test button {
    font-size: 1em;
}

Html (wrap content with a ):

<div class="test">
    <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>

Upvotes: 0

Robert

Reputation: 6967

In your class .add-item you are applying a font-size in EM units which I believe is the problem. The way font sizes are calculated when EM is specified can cause inconsistent 'stacking' issues where font sizes compound up or down far more than expected.

Removing this declaration, or changing it from 2em to 2rem resolves the issue.

body {
  margin: 0 auto;
  height: 100vh;
  color: white;
  /*display: flex;*/
  background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}

.navbar-brand {
  color: white;
}

.add-item {
    font-size: 2rem;
margin: 0 auto;
  border-radius: 30px;
}

.list-group {
  color: gray;
  font-size: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container">
  <div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
    <a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
    <div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
      <form class="mb-4">
        <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
          </div>
          <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
        </form>
      </div>
    </div>
  </div>

Upvotes: 1

Jeremy Thille

Reputation: 26370

That's because form.mb-4 has a computed line-height:96px. Resetting it to 1.5rem fixes the issue :

body {
  margin: 0 auto;
  height: 100vh;
  color: white;
  /*display: flex;*/
  background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}

.navbar-brand {
  color: white;
}

.add-item {
  font-size: 2em;
  margin: 0 auto;
  border-radius: 30px;
}

.list-group {
  color: gray;
  font-size: 18px;
}
form.mb-4 {
   line-height: 1.5rem;
}

<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
    <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
  </nav>
  <!-- /navbar -->
  <!-- todoList -->
  <div class="container">
    <div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
      <a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
      <div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
        <form class="mb-4">
          <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
          </div>
          <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
        </form>
      </div>
      <!-- horizontal line -->
      <hr>
      <!-- list items -->
      <h1 class="heading-4">Todo List Items</h1>
      <ul class="list-group mt-4 pb-4">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
  </div>

Upvotes: 0

Spacing Evenly Elements of a Form in Bootstrap

Answers (3)

Related Questions