Forums

How to use bootstrap styles in edit form of block properly?

Permalink
Hey Dev's!

I struggle to style my block edit dialog with bootstrap support. I readhttp://www.concrete5.org/documentation/developers/system/style-guid... and if I understand this correctly, I should use the regular bootstrap styles in my block form. I want to use the basic form (http://twitter.github.com/bootstrap/base-css.html... ). So only thing I did was changing form-tag to div-tag.

<div class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</div>


I attached the result as screenshot:

Can somebody point out how to use the bootstrap styles correctly?

Thanks in advance!

1 Attachment

programmieraffe
 
ScottC replied on at Permalink Best Answer Reply
ScottC
.well is part of bootstrap 2.0, concrete5.5.1 uses 1.4 . To get those docs you have to search around, i kept forgetting the link so I went ahead and downloaded 1.4 which includes docs in it.

It's that simple.

Aside from that, make sure you are following the recommendation on that page you linked for the block controller:

protected $btWrapperClass = 'ccm-ui';


or you can just put in a div with class of ccm-ui to get the buttons looking the same.
programmieraffe replied on at Permalink Reply
programmieraffe
Thanks for pointing out that bootstrap 1.4 was used. The padding-left now makes sense.

For everyone else stumbling about this, the 1.4 docs are here:

https://github.com/twitter/bootstrap/zipball/v1.4.0...
programmieraffe replied on at Permalink Reply 1 Attachment
programmieraffe
Forgot the mention that I applied this to my block:
protected $btWrapperClass = 'ccm-ui';


Further investigation of the "legend"-element showed the following:
ccm.app.css put's a 150px padding-left to this element (rule .ccm-ui fieldset legend). Screenshot attached.

Can somebody explain why this rule is by default applied? Is this from the bootstrap or added by c5 devs?
ScottC replied on at Permalink Reply
ScottC
and yeah on greek yogurt and bootstrap page in edit mode the fieldsets looked terrible..so i went ahead and got rid of them.