using a special css rule of bootstrap

Hi guys,

following bootstrap CSS rule will order my checkboxes in my formular side by side

<div class="col-sm-2">

    <?=

    $form->field($model, 'arbeitsumfang_teilzeit')->widget(\kartik\checkbox\CheckboxX::classname(), [

   	'autoLabel' => true

    ])->label(false);

    ?>




</div><div class="col-sm-2">

.

.

.

Same rule for DropDownboxes fails. I only found following rule ordering 2 DropdownBoxes side-by-side

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

.

.

</div> <div class="col-md-6">

.

.

</div>

My intention is to set three or better four DropDownBoxes side-by-side.

Unfortunately, i didn’t succeed finding any rule.

Any ideas,which rule I colud use in order to set three/four DropDonBoxes,TextInput-fileds etc…

side by side?

Sounds like you need to learn more about css.

Look at float: left;

https://www.w3schools.com/css/css_float.asp

But you need to clear floats also, working with floats can be tricky.

In fact getting all correct with css is one of the trickiest

parts of a website.

Ur suggestion is nonsense. I’m using yii2 as a framework which will give me all css rules needed. It’s absolutely ineffective writing own css rules as float:left,float:right etc…

bootstrap grid is based on 12 column layout so if you would like to inline 4 dropdowns you need to break it down accordingly

for 2 inline columns as you already have it (6 * 2 = 12)

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

</div>

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

</div>

to make 4 columns (3 * 4 = 12)

<div class="col-md-3">

</div>

<div class="col-md-3">

</div>

<div class="col-md-3">

</div>

<div class="col-md-3">

</div>

to make six dropdowns inline (2 * 6 = 12 )

<div class="col-md-2">

</div>

<div class="col-md-2">

</div>

<div class="col-md-2">

</div>

<div class="col-md-2">

</div>

<div class="col-md-2">

</div>

<div class="col-md-2">

</div>

So , if I want three elements, I get following equation:

3*x=12=>x=4=>col-md-4

Is that correct?

Where could I get informed online about diffent designations of CSS-rules(for instance col-lg/col-lg-offset/col-sm etc…etc…) without inverstigate rules in bootstrap-file?

What do you think bootstrap uses?

First, you should never use a library until you know the basic code.

Same for javascript. Learn basic css before delving into a css library.

Question, would you want a surgeon operating on you without all the training they have to have? NO.

So I would not want a developer working on something unless they knew the "basics" of the code they are using.

I guess small hobby blogs are fine.

Where could I get informed online about diffent designations of CSS-rules(for instance col-lg/col-lg-offset/col-sm etc..etc..) without inverstigate rules in bootstrap-file?

bootstrap docs is your best bet it has very detailed page on the grid here is a link

[size="2"]

Thx for this!

Without U,samdark and umneeq this forum were very poor.

With U, it’s a marvelous place to get problems solved

Go ahead…

This thread can be closed as succesfully solved