Centre column with bootstrap

Question

I am trying to center my container with col-md-5 by using offset, however it is not perfectly centered. I have heard you can nest it within another container to center it, but are unsure how to do so. All my javascript links and bootstrap are present, but are not shown in the code below just to make it shorter for you all to read. I have attached my code below. Thank you for helping me learn and better my skills!

HTML

body {
  background-image: url(../../Icons/violin.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

#sign-up {
  margin-top: 60px;
  border-radius: 5px;
  padding-bottom: 20px;
  background: white;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 7%;
  margin-bottom: 3%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 13px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="col-md-5 offset-md-3" id="sign-up">

      <!-- Logo and Sign Up Text -->
      <div class="text-center">
        <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
        <h1>Signing up as</h1>
      </div>

      <!-- Radio check 1 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                    </label>
      </div>

      <!-- Radio check 2 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                    </label>
      </div>

      <!-- Individual Form -->
      <form id="individual">

        <!-- Individual First Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="First name" />
        </div>

        <!-- Individual Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Last name" />
        </div>

        <!-- Individual Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Individual Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Individual's Birthday -->
        <div class="form-group">
          <label>Birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <!-- Parent Form -->
      <form id="parent" class="hidden">

        <!-- Parent's Fist Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's first name" />
        </div>

        <!-- Parent's Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's last name" />
        </div>

        <!-- Parent Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Parent Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Child's first name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Child's first name" />
        </div>

        <!-- Child's Birthday -->
        <div class="form-group">
          <label>Child's birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <p class="text-center" id="small">By signing up you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>
    </div>
  </div>
  </div>


  CSS

Has to be BS4 based on the use of `offset-md-*`. In previous versions that utility was `col-*-offset-*` — Robert, May 01 '18 at 19:19
Yes, I noticed that too, but I was hoping the OP would clarify. — Carol Skelly, May 01 '18 at 19:25
Related: https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment, https://stackoverflow.com/questions/42528411/center-the-content-inside-a-column-in-bootstrap-4 and https://stackoverflow.com/questions/33379802/bootstrap-centering-col-md-5 — Carol Skelly, May 01 '18 at 20:01

score 0 · Answer 1 · edited Feb 27 '19 at 15:49

body {
  background-image: url(../../Icons/violin.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

#sign-up {
  margin-top: 60px;
  border-radius: 5px;
  padding-bottom: 20px;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 7%;
  margin-bottom: 3%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 13px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="col-md-5" id="sign-up">

      <!-- Logo and Sign Up Text -->
      <div class="text-center">
        <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
        <h1>Signing up as</h1>
      </div>

      <!-- Radio check 1 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                    </label>
      </div>

      <!-- Radio check 2 -->
      <div class="form-check form-check-inline">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                    </label>
      </div>

      <!-- Individual Form -->
      <form id="individual">

        <!-- Individual First Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="First name" />
        </div>

        <!-- Individual Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Last name" />
        </div>

        <!-- Individual Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Individual Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Individual's Birthday -->
        <div class="form-group">
          <label>Birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <!-- Parent Form -->
      <form id="parent" class="hidden">

        <!-- Parent's Fist Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's first name" />
        </div>

        <!-- Parent's Last Name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Parent's last name" />
        </div>

        <!-- Parent Email -->
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" />
        </div>

        <!-- Parent Password -->
        <div class="form-group">
          <input class="form-control" type="password" placeholder="Password" />
        </div>

        <!-- Child's first name -->
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Child's first name" />
        </div>

        <!-- Child's Birthday -->
        <div class="form-group">
          <label>Child's birthday</label>
          <div class="form-inline">
            <!-- Month -->
            <select name="month" onChange="changeDate(this.options[selectedIndex].value);" class="form-control month-space">
              <option value="na">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>

            <!-- Day -->
            <select name="day" id="day" class="form-control ">
              <option value="na">Day</option>
            </select>

            <!-- Year -->
            <select name="year" id="year" class="form-control">
              <option value="na">Year</option>
            </select>
          </div>
        </div>

        <button class="btn blue-button">Confirm</button>

      </form>

      <p class="text-center" id="small">By signing up you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>
    </div>
  </div>
  </div>


  CSS

score 0 · Answer 2 · answered May 01 '18 at 19:24

0

If you are using bootstrap version 3, then you can just change the class of tag placed just after the

<body>
<div class="container">
    <div class="col-md-6 col-md-offset-3" id="sign-up">

Working example here: https://jsfiddle.net/ppqe9b7h/

Happy to help :)

answered May 01 '18 at 19:24

Shivam Gupta

149
5

I want the size of col-md-5, not col-md-6 – May 01 '18 at 19:30

score -1 · Accepted Answer · answered May 01 '18 at 19:18

For the layout you're attempting I would recommend using mx-auto in lieu of offset-*. The former will simply push the column to the center, the latter only works for centering when the number of unused columns is even (so col-8 offset-2 works because 8 + 2 is 10 and you have 2 unused columns to equal 12; the bootstrap grid column length).

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-5 mx-auto bg-danger text-white">
      Test
    </div>
  </div>
</div>

In addition, you need to remember Bootstrap's Grid structure; .row is a necessary component for correct positioning and it was missing from your original example.

Thank you for that. I can't believe I forgot to add the row. I never knew about mx-auto, good to know! Small change in your code to meet what mine was doing is it should be col-md-5. Will mark as solved. — , May 01 '18 at 19:41

Centre column with bootstrap

3 Answers3