Bootstrap form layout

Question

I am trying to make a form with bootstrap in which will have a title field, a state field, a field for po content, field for tags and a boot. I happen to want to put the title field and the state field side by side, the content field just below, followed by the tag field and then the button... But it’s a bit buggy, this was the result of what I’ve done so far...

As you can see, the create button is totally misaligned, followed by the content field that is 100% width, but does not go all the way.

Here’s the code (I’m doing this with Yii framework and bootstrap)

   <?php
/* @var $this NodeController */
/* @var $model Node */
/* @var $form CActiveForm */
?>

<div class="box-body">

    <?php
    $form = $this->beginWidget('CActiveForm', array(
        'id' => 'node-form',

        'enableAjaxValidation' => false,
    ));
    ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php echo $form->errorSummary($model); ?>



<!--- Estado --->
    <div class="form-group row flex-v-center" style="width: 30%; float: right;">
        <?php echo $form->labelEx($model, 'Estado'); ?>
        <?php echo $form->dropDownList($model, 'node_status_id', CHtml::listData(NodeStatus::model()->findAll(), 'id', 'designation'), array('empty' => '--Selecione uma categoria--', 'class' => 'form-control col-xs-3')); ?>
        <?php echo $form->error($model, 'node_status_id'); ?>
    </div>



<!---- Titulo -->
    <div class="form-group row flex-v-center" style="width: 70%; float: left;">
        <?php echo $form->labelEx($model, 'title'); ?>
        <?php echo $form->textField($model, 'title', array('size' => 60, 'maxlength' => 100, 'class' => 'form-control')); ?>
        <?php echo $form->error($model, 'title'); ?>
    </div>




<!--- Conteudo --->
    <div class="form-group row flex-v-center" style="width: 100%; float: left;">
        <?php echo $form->labelEx($model, 'content'); ?>
        <?php echo $form->textarea($model, 'content', array('size' => 60, 'maxlength' => 500, 'id' => 'summernote', 'class' => 'form-control')); ?>
        <?php echo $form->error($model, 'content'); ?>
    </div>




<!----- Tags --->
    <div class="form-group row flex-v-center" style="width: 50%; float: left;">
        <?php echo $form->labelEx($model, 'tags'); ?>

        <!--- Criei este input em html para este ser preencido enquanto o que está em php vai receber os valores deste -->
        <input type="text" id="taggenerator" class="tm-input form-control"/>
        <?php echo $form->error($model, 'tags'); ?>



        <div class="col-sm-12 tags-show">
            <!---Este é o hidden field que vai receber e enviar para a db os valores do input-->
            <?php echo $form->hiddenField($model, 'tags'); ?>
        </div>
    </div>



<!----Botao--->
    <div class="form-group row flex-v-center buttons" style="float: left;">
        <?php echo CHtml::submitButton(($model->isNewRecord ? 'Criar' : 'Guardar'), array('class' => 'btn btn-primary')); ?>
    </div>

    <?php $this->endWidget(); ?>

</div><!-- form -->

Answer 1

Young you need to use the Bootstrap Grid Row/col, the way you did it was completely deformed... I recommend you take about 30 min to read the Grid documentation https://getbootstrap.com/docs/4.0/layout/grid/

I tried to put an example putting things in order, in CSS I left the columns with edge, just for you to better visualize how it got distributed.

Follow the image code above:

[class*="col-"] {
	border: 1px solid #000;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
	<div class="box-body">

		<?php
				$form = $this->beginWidget('CActiveForm', array(
					'id' => 'node-form',
			
					'enableAjaxValidation' => false,
				));
				?>

		<p class="note">Fields with <span class="required">*</span> are required.</p>

		<?php echo $form->errorSummary($model); ?>

		<div class="row">
			<div class="col-4">
				<!--- Estado --->
				<div class="form-group  flex-v-center">
					<?php echo $form->labelEx($model, 'Estado'); ?>
					<?php echo $form->dropDownList($model, 'node_status_id', CHtml::listData(NodeStatus::model()->findAll(), 'id', 'designation'), array('empty' => '--Selecione uma categoria--', 'class' => 'form-control col-xs-3')); ?>
					<?php echo $form->error($model, 'node_status_id'); ?>
				</div>
			</div>
			<div class="col-8">

				<!---- Titulo -->
				<div class="form-group  flex-v-center">
					<?php echo $form->labelEx($model, 'title'); ?>
					<?php echo $form->textField($model, 'title', array('size' => 60, 'maxlength' => 100, 'class' => 'form-control')); ?>
					<?php echo $form->error($model, 'title'); ?>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-12">
				<!--- Conteudo --->
				<div class="form-group flex-v-center">
					<?php echo $form->labelEx($model, 'content'); ?>
					<?php echo $form->textarea($model, 'content', array('size' => 60, 'maxlength' => 500, 'id' => 'summernote', 'class' => 'form-control')); ?>
					<?php echo $form->error($model, 'content'); ?>
				</div>

			</div>
		</div>


		<div class="row">
			<div class="col-12">

				<!----- Tags --->
				<div class="form-group d-flex flex-v-center">
					<?php echo $form->labelEx($model, 'tags'); ?>

					<!--- Criei este input em html para este ser preencido enquanto o que está em php vai receber os valores deste -->
					<input type="text" id="taggenerator" class="tm-input form-control" />
					<?php echo $form->error($model, 'tags'); ?>



					<div class=" tags-show">
						<!---Este é o hidden field que vai receber e enviar para a db os valores do input-->
						<?php echo $form->hiddenField($model, 'tags'); ?>
					</div>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-6">


				<!----Botao--->
				<div class="form-group  flex-v-center buttons">
					<?php echo CHtml::submitButton(($model->isNewRecord ? 'Criar' : 'Guardar'), array('class' => 'btn btn-primary')); ?>
				</div>

			</div>
		</div>

		<?php $this->endWidget(); ?>

	</div><!-- form -->
</div>