align content with bootstrap strange behaviour - html

Question

I am working with vuejs and bootstrap so I am calling different components and attach them inside my HTML dynamically.
My problem is I don't get the desired effect, at the moment I have this:
the section title gives too much space related to the input and I don't know why the section is a different component and the data at the bottom gets loaded dynamically depending on the select box choice.
the rows columns and cells are a horizontal form but it occupies all the width of my row, I want the inputs to be lower and the button at centre a little bigger, I can't set it like I want if I try for example to increase button it will not be at centre anymore.
So here is my code:
<template>
<div class="container">
<div class="row">
<div>
<h1 class="text-center">Document Creation</h1>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-8 margin-above">
<div class="form-group">
<label class="control-label col-sm-2">Section</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<component v-bind:is="currentView">
<!-- component changes when vm.currentView changes! -->
</component>
</div>
</template>
inside the component the other component that has the rows and cells and columns get loaded like this:
<template>
<div class="row">
<div class="col-md-offset-4">
<form class="form-inline margin-above">
<div class="form-group">
<label for="rows">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group">
<label for="columns">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group">
<label for="cells">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="text-center">
<button type="submit" class="btn btn-success margin-above2">Add Table</button>
</div>
</form>
</div>
</div>
</template>
Please, I need some help trying to display it correctly. Thanks.

Answer 1

Currently, you're using too many <div>s for the layout. We can strip a few out to not only simplify the design, but also make it alot easier to read. We also want to leverage the use of bootstrap's Horizontal Forms
.
Your first snippet would look like this:
<template>
<div class="container">
<h1 class="text-center">Document Creation</h1>
<div class="col-md-12 form-horizontal margin-above">
<div class="form-group">
<label class="control-label col-sm-1">Section</label>
<div class="col-sm-11">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<component v-bind:is="currentView">
<!-- component changes when vm.currentView changes! -->
</component>
</div>
<template>
And your second would look like this:
<template>
<form class="margin-above">
<div class="form-group col-sm-4">
<label for="rows" class="control-label">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group col-sm-4">
<label for="columns" class="control-label">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group col-sm-4">
<label for="cells" class="control-label">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="col-xs-12 margin-above text-center">
<button type="submit" class="btn btn-success margin-above2">Add Table</button>
</div>
</form>
</template>
I've made a fiddle here to show the snippets together.

Answer 2

You are going to run into problems trying to use Boostrap and Vue together, but that is a question for another day.
By carefully mimicking the examples here, you can get a more nicely-spaced section layout.
<div class="margin-above form-group row">
<label class="col-form-label col-sm-1">
Section
</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
Making the button bigger is just a matter of adding one of the sizing classes. It does not cause a problem for centering:
<div class="text-center margin-above2">
<button type="submit" class="btn btn-success btn-lg">Add Table</button>
</div>
Putting some extra space in is some ordinary CSS. Here it is as a snippet. Depending on your display size, you may need different col-*-# classes.
new Vue({
el: '#app',
data: {
currentView: 'doesNotMatter',
sections: [{
label: 'one'
}, {
label: 'two'
}]
},
components: {
someComponent: {}
}
});
.margin-above2 {
margin-top: 2rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app" class="container">
<div class="row">
<div>
<h1 class="text-center">Document Creation</h1>
</div>
<div class="margin-above form-group row">
<label class="col-form-label col-sm-1">
Section
</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<some-component inline-template>
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="rows">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group">
<label for="columns">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group">
<label for="cells">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cells">
</div>
<div class="text-center margin-above2">
<button type="submit" class="btn btn-success btn-lg">Add Table</button>
</div>
</form>
</div>
</some-component>
</div>