Yii Framework Forum: using a special css rule of bootstrap - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

using a special css rule of bootstrap [solved]

#1 User is offline   tklustig 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 303
  • Joined: 20-April 17
  • Location:Hannover

Posted 13 January 2018 - 07:00 PM

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?
0

#2 User is offline   jimgwhit2 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 52
  • Joined: 27-September 17
  • Location:U.S.A.

Posted 13 January 2018 - 09:01 PM

Sounds like you need to learn more about css.
Look at float: left;
https://www.w3school...s/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.
0

#3 User is offline   tklustig 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 303
  • Joined: 20-April 17
  • Location:Hannover

Posted 13 January 2018 - 09:38 PM

View Postjimgwhit2, on 13 January 2018 - 09:01 PM, said:

Sounds like you need to learn more about css.
Look at float: left;
https://www.w3school...s/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...
0

#4 User is offline   alrazi 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,533
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 14 January 2018 - 03:08 AM

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>

0

#5 User is offline   tklustig 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 303
  • Joined: 20-April 17
  • Location:Hannover

Posted 14 January 2018 - 04:06 AM

View Postalrazi, on 14 January 2018 - 03:08 AM, said:

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?
0

#6 User is offline   jimgwhit2 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 52
  • Joined: 27-September 17
  • Location:U.S.A.

Posted 14 January 2018 - 10:04 PM

Quote

It's absolutely ineffective writing own css rules as float:left,float:right etc...

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.
0

#7 User is offline   alrazi 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,533
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 15 January 2018 - 04:03 AM

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

https://getbootstrap....0/layout/grid/
1

#8 User is offline   tklustig 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 303
  • Joined: 20-April 17
  • Location:Hannover

Posted 17 January 2018 - 02:16 PM

View Postalrazi, on 15 January 2018 - 04:03 AM, said:


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

https://getbootstrap....0/layout/grid/


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....Posted Image

This thread can be closed as succesfully solved
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users