user3358392
Reputation: 17
Bootstrap grid columns not displaying correctly
I am having an issue with bootstrap and for the life of me I cant seem to get my columns to work correctly. I am sure it is something simple but I have been trying for the last hour or so to no avail
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<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>
<script src="public/assets/js/tabulator.min.js"></script>
<script src="public/assets/js/table.js"></script>
<p></p>
<!-- Begin page -->
<div id="wrapper">
<!--?php include 'layouts/navbar.php'; ?-->
<div class="content-page">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h3>Job Header Infomation</h3>
<div class="container">
<div class="row">
<form action="" method="POST">
<div class="col-sm">
<!-- Form Input -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-md">Description</span></div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Design</span></div>
<select class="form-control" id="form-door-design" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Finish</span></div>
<select class="form-control" id="form-door-finish" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Edge</span></div>
<select class="form-control" id="form-door-edge" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Board Thickness</span></div>
<select class="form-control" id="form-door-board" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Colour</span></div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</div>
</div>
<div class="col-sm">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-md">Description</span></div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</div>
</div>
<div class="col-sm"></div>
</form>
</div>
</div>
<h3>
<!-- <pre><?php //Door_Pricing(); ?></pre> --> <br /> <button class="btn btn-primary w-md waves-effect waves-light" onclick="addRow()">Save</button></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<?php include 'layouts/footer.php'; ?>-->
<p></p>
<!--?php include 'layouts/footerScript.php'; ?-->
<script src="public/plugins/peity-chart/jquery.peity.min.js"></script>It should be three columns but it seems to output everything in one column.
This is how it currently looks
this is what I am trying to achieve
Any help would be greatly appreciated, Thanks in advance!
Upvotes: 0
Views: 84
Answers (2)
Harish
Reputation: 104
check with the working model of that bootstrap, change the class of it accordingly. probably it might be the issue in misplaced tag or class name.
Upvotes: 0
Supun De Silva
Reputation: 1487
Is this what you are trying to achieve ?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<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>
<script src="public/assets/js/tabulator.min.js"></script>
<script src="public/assets/js/table.js"></script>
<p></p>
<!-- Begin page -->
<div id="wrapper">
<!--?php include 'layouts/navbar.php'; ?-->
<div class="content-page">
<div class="container">
<div class="row">
<div class="col-12">
<form action="" method="POST">
<div class="card">
<div class="card-title border-bottom">
<h3 class="pl-2">Job Header Infomation</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
<!-- Form Input -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text"
id="inputGroup-sizing-md">Description</span></div>
<input type="text" class="form-control" aria-label="Small"
aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
Design</span></div>
<select class="form-control" id="form-door-design" aria-label="Small"
aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
Finish</span></div>
<select class="form-control" id="form-door-finish" aria-label="Small"
aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
Edge</span></div>
<select class="form-control" id="form-door-edge" aria-label="Small"
aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Board
Thickness</span></div>
<select class="form-control" id="form-door-board" aria-label="Small"
aria-describedby="inputGroup-sizing-sm"></select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
Colour</span></div>
<input type="text" class="form-control" aria-label="Small"
aria-describedby="inputGroup-sizing-sm" />
</div>
</div>
<div class="col-sm-4">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text"
id="inputGroup-sizing-md">Description</span>
</div>
<input type="text" class="form-control" aria-label="Small"
aria-describedby="inputGroup-sizing-sm" />
</div>
</div>
<div class="col-sm-4">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"><span class="input-group-text"
id="inputGroup-sizing-md">Something else</span>
</div>
<input type="text" class="form-control" aria-label="Small"
aria-describedby="inputGroup-sizing-sm" />
</div>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary w-md waves-effect waves-light" onclick="addRow()">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--<?php include 'layouts/footer.php'; ?>-->
<p></p>
<!--?php include 'layouts/footerScript.php'; ?-->
<script src="public/plugins/peity-chart/jquery.peity.min.js"></script>Upvotes: 1
Related Questions
- Bootstrap grid columns does not seem to be working properly
- Bootstrap columns stacking vertically instead of horizontally
- Bootstrap 4 Grid Issues not aligning the way I need it to
- Columns not getting aligning correctly on the screen using bootsrap 4
- bootstrap grid won't show correctly
- New to Bootstrap 4, Columns are not acting as they should?
- Bootstrap columns aren't displayed next to each other
- Bootstrap grid displays columns as rows
- columns using bootstrap grid not displaying correctly
- Bootstrap grid not displaying properly