CSS Form Vertical Spacing

Reply

Member

15 Points

CSS Form Vertical Spacing

Jun 28, 2017 07:50 PM|jeff.hooper|LINK

At https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal_static&stacked=h, please paste/Run the following HTML and view the results:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form with static control</h2>
  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someone@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email 2:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someoneelse@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>

How do I reduce the vertical spacing between the rows?

Thanks!

Reply

Cathy Zou

Star

8660 Points

2882 Posts

Re: CSS Form Vertical Spacing

Jun 29, 2017 09:03 AM|Cathy Zou|LINK

Hi jeff.hooper

For your problem, you coud change the margin-bottom of rows,

You could add css in you page as below:

 <style>
        .form-group {
            margin-bottom:5px;
        }
    </style>

Best regard

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

NickyAnn

Member

10 Points

1 Post

Re: CSS Form Vertical Spacing

Jun 29, 2017 12:36 PM|NickyAnn|LINK

.col-sm-10 {
width: 83.33333333%;
height: 20px;
}

Give height as 20px for .col-sm-10 and .col-sm-2

Regards,

Nicky

Reply

jeff.hooper

Member

15 Points

62 Posts

Re: CSS Form Vertical Spacing

Jun 29, 2017 02:47 PM|jeff.hooper|LINK

Cathy Zou, thanks for your reply. Your solution worked. But even at 0px, I needed more reduction in spacing. I tried negative values, but that didn't work.

Reply

jeff.hooper

Member

15 Points

62 Posts

Re: CSS Form Vertical Spacing

Jun 29, 2017 02:48 PM|jeff.hooper|LINK

Nicky, this gave me the desired spacing:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form with static control</h2>
  <form class="form-horizontal" action="/action_page.php">
    <style>.col-sm-2 {height:5px;}</style>
    <style>.col-sm-10 {height:5px;}</style>
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someone@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email 2:</label>
      <div class="col-sm-10">
        <p class="form-control-static">someoneelse@example.com</p>
      </div>
    </div>
  </form>
</div>

CSS Form Vertical Spacing [Answered]RSS

4 replies

Shortcuts

CSS Form Vertical Spacing

Re: CSS Form Vertical Spacing

Re: CSS Form Vertical Spacing

Re: CSS Form Vertical Spacing

Re: CSS Form Vertical Spacing