Twitter Bootstrap Question posted in

How do I center a div and change the space between elements in a form?-Twitter bootstrap

I a creating a website with a form, that is aligned in the middle of the page horizontally. But I am unsure how to center it vertically. It may be that parameters in either the CSS or the HTML are the problem. What can I do to get this done?

I want the separation between the underlying divs to occur exactly in the middle of the mentioned text field and the paragraph. To accomplish this, I also need to increase the space between them! How do I do that?

This is how it looks:

Image of the div in question.

CIApp.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id=gitForm>
  <div class="text-left">
    <form class="col-sm-10 form-group-lg">
      <div class="form-group">
        <div class="projectNameContainer">
          <label id="nameLabel" class="from-control-label" for="projectNameInput">Name your
                                project</label>
          <input type="text" class="form-control form-control-lg" id="projectNameInput">
        </div>
      </div>
      <div class="form-group">
        <div class="gitRepoContainer">
          <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                                repository</label>
          <input type="text" class="form-control form-control-lg" id="repoInput">
        </div>
      </div>
      <button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
                        Submit
                    </button>
    </form>
  </div>
</div>

CSS 

#gitForm {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 46.5%;
  margin-left: auto;
  padding-bottom: 0.5%;
  max-height: 20%;
  width: 25%;
  color: #333333;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  display: flex;
  float: none;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is a duplicate (which I did not know). Thank you @Rob for pointing me in the right direction!


  2. 0

    Looking at your image i think you are talking about horizontally centered. So, presuming that you can give class like class = "col-md-offset-4" in the div tag of this form like.

    <div class="form-group">
                <div class="col-md-offset-4 gitRepoContainer">
                    <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                        repository</label>
                    <input type="text" class="form-control form-control-lg" id="repoInput">
                </div>
            </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search