CODEWITHSUNDEEP
bootstrap-vue
Robert Strauch
Robert Strauch

Reputation: 12896

Align simple form controls to the left in BootstrapVue

I'm just getting started with BootstrapVue but I have some trouble understanding the layout system despite their comprehensive documentation.

My first attempt is to create a simple form with three checkboxes. This is what I have so far:

<template>
  <div>
    <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>
  </div>
</template>

This is getting rendered like in the following image. As you can see, all checkboxes are centered horizontally on the screen taking up the full width.

I'm struggling how I can align the elements (header and form components) to the left of the screen and not taking up the complete width.

horizontally centered checkboxes

Upvotes: 1

Views: 736

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1627

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>

Upvotes: 1

Related Questions