Bootstrap inline button dropdown within <p> jumbotron
- by C.B.
Currently I have a jumbotron setup with some paragraph text, and I would like to stick a button dropdown inline with the text.
Dropdown button
<span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Button... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Opt 1</a></li>
<li><a href="#">Opt 2</a></li>
</ul>
</span>
Jumbotron
<div class="jumbotron">
<h1>Hello!</h1>
<p>Welcome</p>
<p>Another paragraph
<!-- dropdown is here -->
</p>
</div> <!-- jumbotron -->
If the dropdown is within the <p> tag, it does not "dropdown" (but renders). If it is outside of the <p> tag it functions fine, but I would like it to be inline with the text and need the text to be in the <p> tag to get the style. Any ideas?
Things to note -- If I replace the <span> tags with <div> tags, it will work fine within the <p> tags, but won't be inline.
