I have this html code and I'm trying to align some buttons with first input group section.! See atached picture.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Phone</label>
<div class="input-group">
<select class="form-control input-xs" name="selectbasic" id="selectbasic1">
<option>Option one</option>
<option>Option two</option>
</select>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
</div>
</div>
</div>
Wrong rendering :
How can I align my buttons from second and third col-md- with first col-md-??? The problem is that the first col-md- section has a select with label ...
You are overcomplicating it. If you want them to be in line with the other buttons, then they should be in the same group col as your other buttons, and then just work some padding magic to make them separate from each other. http://bootply.com/83379 for a working example. Code below:
CSS
.input-group-btn:nth-of-type(2) {
padding:0 20px;
}
HTML
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Phone</label>
<div class="input-group">
<select class="form-control input-xs" name="selectbasic" id="selectbasic1">
<option>Option one</option>
<option>Option two</option>
</select>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
</span>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
</span>
<a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
</div>
</div>
</div>
</div>
UPDATE: IE8 Support
IE8's support for nth-of-type is apparently suspect, so if you wanted to ensure support, we can change that CSS rule to be a class, and then add it to the <span> with the two buttons in it.
CSS
.input-group-btn-padding {
padding:0 20px;
}
See http://bootply.com/83596 for a working example.
Can't you use an extra class with margin-top with the form-group?
Related
I would like to add 2 buttons(fa-plus & fa-minus) just below every image. The buttons must stick with the image. I have added the code but the buttons are not sticked with the image. How I can do that? Is there any better logic to doing this? I'm having trouble understanding CSS and Bootstrap.
```
.image-card {
width: 45px;
height: 40px;
}
.image-card img {
width: 100%;
min-height: 100%;
}
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="card">
<div class="card-body">
<div class="card mb-2 box">
<div class="card-body">
<div class="d-flex flex-row justify-content-center">
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I working with css, trying to do a custom upload file.. I want something like this:
but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:
what am I doing wrong? why I can´t show it in just one line?
HTML:
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>
</button>
</div>
</div>
<ol class="files upload-files-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Fiddle Demo
I search Bootstrap documentation but I get similar result, I try with given code but I get same result:
Just wrap your icon, input, button into input-group class.
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>
Also you have used col-md-12 wrongly, use row class before it.
Updated Fiddle
This seems to work :
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
Demo
Note the classes input-group, input-group-append and input-group-prepend
I want to display buttons to the right in bootstrap panel-heading i tried to add pull-right class on all buttons but its breaking some css rules on panel-body, How can i display all buttons on right side in bootstrap panel-heading ?
main.html
<div class="col-md-11">
<div ng-show="showMessage">
<p class="recordMessage">File is being recorded to the server ,once you stop recording it will prompt for cancel or download. </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">DIT LOGS
<div class="pull-right" style="padding-right: 300px">
<button type="button" class="btn btn-danger btn-rad btn-lg"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-lg"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-lg"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-lg"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
</div>
</div>
</div>
try putting them in an other div
<div class="panel-heading">DIT LOGS
<div class="pull-right">
<button type="button" class="btn btn-danger btn-rad btn-xs"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-xs"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-xs"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-xs"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
Image
So as you can see in the image above, the History button is not affected by the black outlines like the other buttons is. Apparently the button is not in the class but as you can see in the code below it is.
<div class="container" id="main-container">
<div class="row main-row">
<div class="col-sm-3">
<div style="padding-top: 10px; margin-bottom: 20px;">
<div id="topleft-menu">Menu</div>
<div class="topleft-link-wrapper logout" style="display: none;">
<button class="topleft-link btn btn-primary btn-block" id="change-trade-url-btn"><span class="glyphicon glyphicon-pencil"></span> Change your trade URL</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-info btn-block" data-toggle="modal" data-target="#about-modal"><span class="glyphicon glyphicon-list-alt"></span> About/How it works</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-warning btn-block" id="support-btn"><span class="glyphicon glyphicon-question-sign"></span> Support</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-default btn-block" id="donate-btn"><span class="glyphicon glyphicon-usd"></span> Donate</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-success btn-block" id="history-btn"><span class="glyphicon glyphicon-list"></span> History</button>
</div>
I don't know why this problem occurs.
Also if you wanna inspect the site visit; www.csgoxd.net
The other elements have the css declaration:
.topleft-link-wrapper:not(:last-child)
So your last child element will not have the border declarations.
I have form, in it user can duplicate input forms, and I have a trouble with a radio buttons.
When I trying to use:
$('form').serialize();
In Chrome Dev Tools
I've got:
"text-field%5B%5D=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2+%D0%98%D0%B2%D0%B0%D0%BD+%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42&text-field%5B%5D=(000)+000+00+00&text-alignment%5B%5D=center& text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42"
As you can see, radio buttons are not in "array", it's an unique variable.
But I use the "[]" symbols at the end of variable name.
Here is my HTML:
<form>
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Шаблон <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Имя</li>
<li>Телефон</li>
<li>E-mail</li>
<li>Адрес</li>
<li>Сайт</li>
</ul>
</div>
<input type="text" class="form-control" name="text-field[]">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked="checked" name="text-alignment[]" value="left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</label>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-h-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button>
</div>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-v-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</div>
</div>
<div class="row margin-top-15">
<div class="col-lg-4">
<a href="#" class="color-green" onclick="$(this).closest('.container-fluid').find('.row:eq(0)').clone().prependTo($(this).closest('.container-fluid form'))">
<div class="circle green-circle circle-position pull-left"><span class="glyphicon glyphicon glyphicon-plus color-white circle-plus" aria-hidden="true"></span> </div>Добавить еще поля</a>
</div>
</div>
</form>
I did not find a native solution in HTML.
Therefore it was necessary to use such a solution to the JS:
$(this).closest('.container-fluid').find('.row:eq(0)').clone(true).find('input[type=radio]').attr('name', function(i, val){return val.replace(/(\d+)/, function(n){ return ++n })});
As a result, when you click on "duplicate field", appears radio buttons with the names: text-alignment[1], text-alignment[2]...