Bootstrap Code

Display HTML element in page is tricky; you need to use <code> tag to display inline code and <pre> tag to display as code block. Bootstrap supports both tags. You need to use unicode variants for open and closing tag e.g. < and >.

If you want to display in line code use <code>.btn-group</code> tag.
If you want to display complete code block (multi lines) use <pre>.btn-group</pre> tag.

Syntax <code>

Usually <code><div></code> tag is used for group creation.

The above code example will produce below output:

Usually <div> tag is used for group creation.

Syntax <pre>

<pre>
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-primary"&gt;Scripts&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" role="menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;AngularJS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

The above code example will produce below output:

<div class="btn-group">
<button type="button" class="btn btn-primary"></button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Javascript</a></li>
<li><a href="#">AngularJS</a></li>
</ul>

« Previous