CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
spring
spring

Reputation: 18537

offset-4 elements do not line up

This is a very basic question (learning Bootstrap/Bootstrap4).

I don't understand why the "button" below is not left aligned with the two elements above it. I've tried lots of variations but I still don't get it.

I'm not "looking for the codez" as much as looking for the flaw in my understanding here. There is no other CSS active.

enter image description here

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


    <div class="container">
        <form>
            <fieldset>
                <div class="form-group">
                    <div class="row">
                        <label for="project-directory" class="col-4 col-form-label text-right">Project Directory</label>
                        <input type="text" class="col col-6 form-control" id="project-directory" placeholder="Select directory. . .">
                        <small class="offset-4 form-text text-muted mb-3">Select or create the directory where the project should be saved</small>
                    </div>
                    <div class="row">
                        <div class="col offset-4">
                            <button class="btn btn-primary">Button</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>

Update: Ok – using the Chrome dev tools, I can now see the added padding for col(Should have thought to look before asking the question). I was following a video tutorial and I thought the instructor stated that col was to be added to each element, even if tags like col-4 or offset-2 were also added. Seemed redundant to me – but there seems a lot that is redundant – like the use of btn btn-primary

enter image description here

Upvotes: 1

Views: 75

Answers (2)

Rajib karmaker
Rajib karmaker

Reputation: 486

<div class="offset-4">
  <button class="btn btn-primary">Button</button>
</div>

You have used col class. by default bootstrap set padding-left: 15px; for the col class. class="col" is the reason for the space/alignment.

https://codepen.io/rajibchandrakarmaker/pen/mjmYpM

Upvotes: 1

OliverRadini
OliverRadini

Reputation: 6476

It's because different elements respond in different ways to having the col-4 class. Adjusting it to only use divs, everything aligns:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form>
        <fieldset>
            <div class="form-group">
                <div class="row">
                  <div class="col-4">First</div>
                  <div class="col-6">Second</div>
                </div>
                <div class="row">
                    <div class="col offset-4">
                        <button class="btn btn-primary">Button</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Upvotes: 0

Related Questions