Align simple form controls to the left in BootstrapVue
Solution 1:
If I understand the problem right, you should use the bootstrap grid system which you can read more at this link: https://bootstrap-vue.org/docs/components/layout
I create a simple snippet to show you how you can move your form to the left and have another section on the right and you can extend it to anything you want or event making it mobile-friendly.
Also, your form in your snippet shouldn't be at the center and I think you have some CSS code somewhere else and because of that, you are seeing your form at the center.
new Vue({
el: '#app'
}).leftSection {
background: lightgray;
}
.rightSection {
background: cyan;
}<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-container fluid>
<b-row>
<b-col cols="4" class="leftSection">
<h3>Headline</h3>
<b-form class="p-3">
<b-form-group>
<b-form-checkbox>An option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>Another option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>A third option</b-form-checkbox>
</b-form-group>
</b-form>
</b-col>
<b-col cols="8" class="rightSection">
<h3>Dashboard</h3>
</b-col>
</b-row>
</b-container>
</div>