Reputation: 18537
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.
<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
Upvotes: 1
Views: 75
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
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