how to create a chat input box in bootstrap 3? - twitter-bootstrap-3

Question

I want to create somthing that in bootsrap:
[colorpicker | input box | button] [toggle button]
I have used:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
<button class="btn btn-default">Users</button>
</span>
</div>
However, I don't know what colorPicker for bootstrap I should use (only 9 colors pickers) and how to add it on left side.
Any help is welcome.
Fiddle: http://jsfiddle.net/5B5v5/

Answer 1

Since I think you're saying you want a color picker with just 9 color options, I would go with a dropdown instead of a fully baked color-picker plugin... like so:
<div class="form-inline">
<div class="input-group">
<div class="input-group-btn">
<!-- COLOR PICKER -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</li>
<li><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</li>
<li><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</li>
<li>...more...</li>
</ul>
<!-- END COLOR PICKER -->
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Send</button>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
</div>
</div>
DEMO: http://www.bootply.com/ecziRvg9Jg
If you do find a true color picker that lets you do 9 colors only, attach it to the button I commented in the code.