0

So I went into Bootstrap 4 docs and tried to implement some offset on my form-rows cols so that it is more centered. However it is not working and I am not sure why. I looked around for similar problems but where other issues found a solution, My issue did not. I have implemented the offset-5 in the first two input fields. Here is the page: https://jorgeg1105.github.io/JorgePortfolioV3/ and here is the code snippet for the area I am having trouble with:

<div class="contact text-center">
  <div class="contact_container">
   <div class="row">
    <div class="col-xl-12">
     <h2>Want To Work Together?</h2>
     <p class="jorgeInfo">Tell me a little bit about yourself and your project. Then I will get in contact with you to schedule a time to chat. You can expect a reply within a day at most.</p>
    </div>
   </div><!--end row-->
   <form>
    <div class="form-row">
     <div class="col-3 offset-5">
      <input type="text" class="form-control" placeholder="First Name *">
     </div><!--end col-->
     <div class="col-3 offset-5">
      <input type="text" class="form-control" placeholder="Last Name *">
     </div><!--end col-->
    </div><!--end row-->
    <div class="form-row">
     <div class="col-3">
      <input type="text" class="form-control" placeholder="Phone Number">
     </div><!--end col-->
     <div class="col-3">
      <input type="email" class="form-control" placeholder="Email *">
     </div><!--end col-->
    </div><!--end row-->
    <div class="form-row">
     <div class="col-3">
      <input type="text" class="form-control" placeholder="What is 5+2? *">
     </div><!--end col-->
    </div><!--end row-->
    <div class="row">
     <div class="col-5">
      <textarea class="form-control" rows="5" placeholder="Tell me a little about your project. Budget details are also appreciated."></textarea>
     </div><!--end col-->
    </div><!--end row-->
    <button type="submit" class="button">Submit</button>
   </form><!--end form-->
   <p>* Required</p>
  </div><!--end contact_container-->
 </div><!--end contact-->

Thanks a ton!

Jorge
  • 75
  • 7
  • Possible duplicate of [Offsetting columns is not working (Bootstrap v4.0.0-beta)](https://stackoverflow.com/questions/45650990/offsetting-columns-is-not-working-bootstrap-v4-0-0-beta) – Joe B. Oct 25 '17 at 04:07
  • **Bootstrap@4** is `flex-box` design. You no need to use `.offset-* class`. You will use `justify-content-end`, `justify-content-between` like this. Please check the link and read the documentation https://v4-alpha.getbootstrap.com/layout/grid/ – Rahul Oct 25 '17 at 10:06
  • @Rahul then why ia that offset piece in the documentation if thats not the way we are supposed to do it – Jorge Oct 25 '17 at 11:34

2 Answers2

0

I cannot see the code but sometimes it's due to the fact, that no new row or container was created.

That's something you could try.

Otherwise, showing the code snipped would help.

Cheers

Mars
  • 105
  • 3
  • 8
0

I figured it out guys. Turns out that I was trying to use the offset class with an older version of Bootstrap 4 which at the time did not have said class. Funny enough the version that DID include it was released like two days before I posted this and I had not updated my Bootstrap. I did now, Thanks for the help!

Jorge
  • 75
  • 7