Reputation:

Alignment issues in Bootstrap4

I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.

The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.

The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.

Attached is the code:

<form>

    <div class="form-group row">
        <label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
        <div class="col-md-10">
            <div class="row">
                <!-- Material inline 1 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">1</label>
                </div>

                <!-- Material inline 2 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">2</label>
                </div>

                <!-- Material inline 3 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">3</label>
                </div>

                <!-- Material inline 4 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">4</label>
                </div>

                <!-- Material inline 5 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">5</label>
                </div>

                <!-- Material inline 6 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">6</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row col-md-10">
        <label for="section" class="col-12 col-md-2 col-form-label">Section</label>
        <div class="form-group row ">
            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-primary">Reserve</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row col-md-10">
        <label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
        <div class="col-6 col-md-3">
            <input type="date" class="form-control" id="date" placeholder="Date">
        </div>
        <div class="col-6 col-md-3">
            <input type="time" class="form-control" id="time" placeholder="Time">
        </div>
    </div>
    <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>
</form>

Upvotes: 1

Answers (4)

g.ho3ein

Reputation: 19

try this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
  <div class="container-fluid">
    <div class="row my-4">
      <div class="col-md-2">
        <label for="Number of Guests" class="col-form-label">Number of Guests</label>
      </div>
      <div class="col-md-10">
        <div class="row">
          <!-- Material inline 1 -->
          <div class="form-check form-check-inline ml-3">

            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio1">
                                <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio2">
                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio3">
                                <input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio4">
                                <input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
                            </label>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="section" class="col-form-label">Section</label>
      </div>
      <div class="col-md-10">
        <div class="form-group ">
          <button type="submit" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="dateandtime" class="col-form-label">Date and Time</label>
      </div>
      <div class="col-md-10">
        <div class="form-group d-flex">
          <input type="date" class="form-control col-md-3" id="date" placeholder="Date">
          <input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="offset-md-2 col-md-10">
        <button type="submit" class="btn btn-secondary">Cancel</button>
        <button type="submit" class="btn btn-primary">Reserve</button>
      </div>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 0

Halden Collier

Reputation: 862

I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Number of Guests
        </label>
      </div>
      <div class="col-md-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">1</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">2</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">3</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">4</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">5</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">6</label>
        </div>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Section
        </label>
      </div>
      <div class="col-md-10">
        <button class="btn btn-secondary" type="submit">
          Cancel
        </button>
        <button class="btn btn-primary" type="submit">
          Reserve
        </button>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Date & Time
        </label>
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-6">
            <input id="date" class="form-control" type="date">
          </div>
          <div class="col-6">
            <input id="time" class="form-control" type="time">
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-12">
      <button class="btn btn-secondary" type="submit">
        Cancel
      </button>
      <button class="btn btn-primary" type="submit">
        Reserve
      </button>
    </div>
  </div>
</form>

I hope this was helpful, best of luck!

Upvotes: 0

Rule

Reputation: 325

I can only suggest you read this page. https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.

For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.

 <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>

I suggest you start with the simpler solution as provided in the link. A row with 2 columns. See where that gets you.

    <div class="row">
        <div class="col-sm">
            <button type="submit" class="btn btn-secondary">Cancel</button>
        </div>

        <div class="col-sm">
            <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
</div>

Upvotes: 1

Halden Collier

Reputation: 862

So there's a few things as to why these elements aren't aligning properly:

You should never use .row & .col in the same class, instead you should lay them out like so:

<form>
    <div class="row">
        <div class="col-md-4">
            I am a column on the left (4/12)
        </div>
        <div class="col-md-10">
            I am a column on the right (10/12)
        </div>
    </div>
</form>

Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:

<div class="row">
    <div class="col-6">
        <div class="row">
            <div class="col-md-4">
                I am inside of a larger column
            </div>
            <div class="col-md-10">
                So am I!
            </div>
        </div>
    </div>
</div>

It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.

I hope this helps clear a few things up, let me know if you're still a bit stuck.

Upvotes: 0

Alignment issues in Bootstrap4

Answers (4)

Related Questions