Thank you for taking a look at my question!
What I'm trying to do in bootstrap is add a textarea that have text-editor buttons in them.. "bold", "italic" and "attachment" it's supposed to look like this:
Mockup
But instead I have this:
My Results so far
The main problems I'm having is:
Hot to Prevent text in textarea from going under the editor buttons
What do I need to override in buttons to get the desired effects
By the way I'm using a bootstrap template/theme its called remark, I'm using one of their editor element:
getbootstrapadmin.com/remark/base/forms/editor-markdown.html
template/11989202
HTML I have so far:
<div>
<div class="md-header btn-toolbar btn-toolbar-btm">
<div class="btn-group">
<button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown"
data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
</span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic"
data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
<span class="icon wb-attach-file"></span> </button>
</div>
</div>
<textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
</div>
CSS:
.btn-toolbar-btm{
position:absolute;
top:212px;
margin-left:8px;
z-index:3;
}
If you can help me in any way I will GREATLY appreciate it, you would literally save my job :/
try this code
<div class="form-group required-field-block">
<div class="col-md-12 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
</div>
So I'm building a navbar on a website with a search bar included, along with a grouped button. It works fine on a desktop view, but when I shrink down to mobile view and the site produces the collapsible menu, the search bar stays to the left, but the button floats off to the right. I do not have this issue when I remove the span with the input-group-btn class that surrounds it.
<form class="navbar-form navbar-left form-inline" role="search">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" style="width: 250px;"/>
<span class='input-group-btn'>
<button type="button" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
Picture included
http://bit.ly/1G706rC
EDIT: I fixed my own issue! I just had to add a pull-left class to the span
The issue might be something to do with the width of the text-input to be fixed in px. Try a relative measure in percentages (%) and it might work since it will resize according to the window size.
I have small buttons on either side of a input text box. It displays OK at desktop screen widths. But around 700 pixels all three objects wrap to separate rows. I've tried putting them into a row and column . That only made things worse; didn't display inline even at wide screen widths.
<div class="form-inline">
<div class="row">
<div class="col-xs-9">
<button id="mnBlue" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<div class="form-group">
<label class="sr-only">Blue Quantity</label>
<input class="form-control" id="QuantityEdit_Blue" name="QuantityEdit.Blue" type="number" value="" />
<button id="plBlue" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
</div>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="control-label">Quantity</label>
<div class="input-group">
<button id="mnRed" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<input class="form-control" id="QuantityEdit_Red" name="QuantityEdit.Red" type="number" value="" />
<button id="plRed" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
<span class="field-validation-valid text-danger" data-valmsg-for="QuantityEdit.Red" data-valmsg-replace="true"></span>
</div>
</div>
The top buttons and text box in the linked screen capture shows the display I'm trying to achieve on a mobile phone sized screen. The bottom shows what is happening at mobile screen widths.
Flickr: Example Screen Capture
I'm trying to implement a search bar on the footer using Bootstrap. The search bar appears to display properly when the window is maximized. However, when I try to resize the window to be smaller, the search form widens and the height of the bottom navbar appears to increase, as shown in the picture below:
What I want is for the navbar height to stay the same. The search bar should also not expand in length. Basically, even with a smaller window, the navbar should appear as follows:
The HTML code that I used to generate the bottom navbar is provided below:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Any help would be greatly appreciated, as I'm fairly new to Bootstrap and web development in general and I've been stuck trying to look for a solution to this problem for several hours without any luck.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form role="form">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9093/
Now you can add styling like padding and margin as you want :)
Try to remove "navbar-form" class from your form and try again.
Instead of this
form class="navbar-form navbar-left"
Try as
form class="navbar-left"
What is the best way to horizontally space Bootstrap buttons?
At the moment the buttons are touching:
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
<li>
new
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>
jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/
Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.
Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3 and Bootstrap 4.
In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes, such as mx-2.
Just put the buttons in a class ( class="btn-toolbar" ) as told by bro Miroslav Popovic.It works awesome.
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>
You can use spacing for Bootstrap and no need for any additional CSS. Just add the classes to your buttons. This is for version 4.
What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important
<div class="btn-toolbar pull-right">
<button type="button" class="btn mr-3">btn1</button>
<button type="button" class="btn mr-3">btn2</button>
<button type="button" class="btn">btn3</button>
</div>
p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right.
you should use bootstrap v.4
<div class="form-group row">
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn1">
</div>
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn2">
</div>
</div>
The easiest way in most situations is margin.
Where you can do :
button{
margin: 13px 12px 12px 10px;
}
OR
button{
margin: 13px;
}
Dragan B. solution is correct. In my case I needed the buttons to be spaced vertically when stacking so I added the mb-2 property to them.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary mr-2 mb-2">First</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>
Here's another approach based on the documentation.
<div class="d-grid gap-2 d-md-flex" >
<button type="button" class="btn btn-outline-primary btn-sm">button1</button>
<button type="button" class="btn btn-outline-primary btn-sm">button2</button>
</div>
I used the Bootstrap 4 buttons plugin (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin)
and added the class rounded to the labels and the class mx-1 to the middle button to achieve the desired look and feel of separate radio buttons. Using the class btn-toolbar made the radio button circles appear for me which is not what I wanted. Hope this helps someone.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active rounded">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary rounded mx-1">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary rounded">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Another way to achieve this is to add a class .btn-space in your buttons
<button type="button" class="btn btn-outline-danger btn-space"
</button>
<button type="button" class="btn btn-outline-primary btn-space"
</button>
and define this class as follows
.btn-space {
margin-right: 15px;
}
I actual ran into the same requirement. I simply used CSS override like this
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
if use Bootstrap, you can change with style like: If you want only in one page, then betwen head tags add .btn-group btn{margin-right:1rem;}
If is for all the web site add to css file
You could also just put the two buttons in a flexbox and set the gap with css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-row" style="gap:5px;">
<button type="button" class="btn btn-primary">Add to list</button>
<button type="button" class="btn btn-secondary">more</button>
</div>
I ended up doing something similar to what mark dibe did, but I needed to figure out the spacing for a slightly different manner.
The col-x classes in bootstrap can be an absolute lifesaver. I ended up doing something similar to this:
<div class="row col-12">
<div class="col-3">Title</div>
</div>
<div class="row col-12">
<div class="col-3">Bootstrap Switch</div>
<div>
This allowed me to align titles and input switches in a nicely spaced manner. The same idea can be applied to the buttons and allow you to stop the buttons from touching.
(Side note: I wanted this to be a comment on the above link, but my reputation is not high enough)