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>
Related
here i have my jQuery function to select buttons, if i just use a function in conjunction with a selection ( comment part1 - part 1 end) my code works great.
But in conjunction with the second function / html part 2 my code no longer works properly!
Where is the error?
Here you can see the issue, i can select in the first row, but when i want to select another value in second row the selection in first row is deselected/disabled.
in summary i can only select a value in one row
<script>
jQuery(document).ready(function($){
$(".btnrating").on('click',(function(e) {
var previous_value = $("#selected_rating").val();
var selected_value = $(this).attr("data-attr");
$("#selected_rating").val(selected_value);
$(".selected-rating").empty();
$(".selected-rating").html(selected_value);
for (i = 1; i <= selected_value; ++i) {
$("#rating-star-"+i).toggleClass('btn-warning');
$("#rating-star-"+i).toggleClass('btn-default');
}
for (ix = 1; ix <= previous_value; ++ix) {
$("#rating-star-"+ix).toggleClass('btn-warning');
$("#rating-star-"+ix).toggleClass('btn-default');
}
}));
});
jQuery(document).ready(function($){
$(".btnrating").on('click',(function(f) {
var previous_value = $("#selected_heart").val();
var selected_value = $(this).attr("data-heart");
$("#selected_heart").val(selected_value);
$(".selected-heart").empty();
$(".selected-heart").html(selected_value);
for (i = 1; i <= selected_value; ++i) {
$("#rating-heart-"+i).toggleClass('btn-warning');
$("#rating-heart-"+i).toggleClass('btn-default');
}
for (ix = 1; ix <= previous_value; ++ix) {
$("#rating-heart-"+ix).toggleClass('btn-warning');
$("#rating-heart-"+ix).toggleClass('btn-default');
}
}));
});
</script>
This is my HTML:
Part 1 works fine alone.
<!-- Part 1 Start -->
<div class="form-group" id="rating-ability-wrapper">
<label class="control-label" for="rating">
<input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
</label>
<h2 class="bold rating-header" style="">
<h4>How did you like the food?</h4>
</h2>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="5" id="rating-star-5">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<span class="selected-rating">0</span><small> / 5</small>
</div>
<!-- Part 1 End -->
<!-- Part 2 Start -->
<div class="form-group" id="rating-ability-wrapper">
<label class="control-label" for="rating">
<input type="hidden" id="selected_heart" name="selected_heart" value="" required="required">
</label>
<h2 class="bold rating-header" style="">
<h4>how satisfied were you with the food?</h4>
</h2>
<button type="button" class="btnrating btn btn-default btn-lg" data-heart="1" id="rating-heart-1">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-heart="2" id="rating-heart-2">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-heart="3" id="rating-heart-3">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-heart="4" id="rating-heart-4">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-heart="5" id="rating-heart-5">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<span class="selected-heart">0</span><small> / 5</small>
</div>
<!-- Part 2 End -->
Your heart rating buttons had a class of .btnrating when they should be .btnheart.
You also had two calls to jQuery(document).ready() when only one was necessary.
This code should work now:
jQuery(document).ready(function($){
$(".btnrating").on('click',function(e) {
var previous_value = $("#selected_rating").val();
var selected_value = $(this).attr("data-attr");
$("#selected_rating").val(selected_value);
$(".selected-rating").empty();
$(".selected-rating").html(selected_value);
for (i = 1; i <= selected_value; ++i) {
$("#rating-star-"+i).toggleClass('btn-warning');
$("#rating-star-"+i).toggleClass('btn-default');
}
for (ix = 1; ix <= previous_value; ++ix) {
$("#rating-star-"+ix).toggleClass('btn-warning');
$("#rating-star-"+ix).toggleClass('btn-default');
}
});
$(".btnheart").on('click',function(f) {
var previous_value = $("#selected_heart").val();
var selected_value = $(this).attr("data-heart");
$("#selected_heart").val(selected_value);
$(".selected-heart").empty();
$(".selected-heart").html(selected_value);
for (i = 1; i <= selected_value; ++i) {
$("#rating-heart-"+i).toggleClass('btn-warning');
$("#rating-heart-"+i).toggleClass('btn-default');
}
for (ix = 1; ix <= previous_value; ++ix) {
$("#rating-heart-"+ix).toggleClass('btn-warning');
$("#rating-heart-"+ix).toggleClass('btn-default');
}
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Part 1 Start -->
<div class="form-group" id="rating-ability-wrapper">
<label class="control-label" for="rating">
<input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
</label>
<h2 class="bold rating-header" style="">
<h4>How did you like the food?</h4>
</h2>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<button type="button" class="btnrating btn btn-default btn-lg" data-attr="5" id="rating-star-5">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
<span class="selected-rating">0</span><small> / 5</small>
</div>
<!-- Part 1 End -->
<!-- Part 2 Start -->
<div class="form-group" id="rating-ability-wrapper">
<label class="control-label" for="rating">
<input type="hidden" id="selected_heart" name="selected_heart" value="" required="required">
</label>
<h2 class="bold rating-header" style="">
<h4>how satisfied were you with the food?</h4>
</h2>
<button type="button" class="btnheart btn btn-default btn-lg" data-heart="1" id="rating-heart-1">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnheart btn btn-default btn-lg" data-heart="2" id="rating-heart-2">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnheart btn btn-default btn-lg" data-heart="3" id="rating-heart-3">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnheart btn btn-default btn-lg" data-heart="4" id="rating-heart-4">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btnheart btn btn-default btn-lg" data-heart="5" id="rating-heart-5">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<span class="selected-heart">0</span><small> / 5</small>
</div>
<!-- Part 2 End -->
I am using the following code to generate the buttons below, but 1) the button couldn't spread across the, after using btn-block suggested. And also the button didn't center-aligned, as justify-content-center suggested. I pasted my code below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
<div class="row">
<div class="col pl-1">
<div class="form-row no-gutters h-100">
<div class="form-group col card form-header text-center">
<div class="card-header form-label">
<label for="action">Action <i class="fas fa-plus"></i></label>
</div>
<div class="card-body h-100 d-flex flex-column">
<div class="p-2">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
class="fas fa-sync"></i></button>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the screenshow below:
I would like to 1) Vertical Align the button 2) Decrease the spacing between the buttons 3) Make sure the whole card align with the box on the left (I used h-100 to ensure it fills the whole height). Similar to the pics below:
Thanks in advance
you simply edit one class of bootstrap .col-1 to .col-4 and you get the like image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="col-4 pl-1">
<div class="form-row no-gutters h-100">
<div class="form-group col card form-header text-center">
<div class="card-header form-label">
<label for="action">Action <i class="fas fa-plus"></i></label>
</div>
<div class="card-body h-100 d-flex flex-column">
<div class="p-2">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
class="fas fa-sync"></i></button>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
enter image description here
.row2 {
display: flex;
align-items: center;
}
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row2">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
Here some DOCUMENTATION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="input-group">
<textarea class="form-control" name="textareaAxs" ></textarea>
<div class="input-group-append">
<a class="input-group-button btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
</div>
</div>
</div>
</div>
I've tried googling this question but I haven't found an answer yet. I'm working on a set of page controls and I'm having trouble getting my text to vertically center within the buttons.
Here's my html so far:
<div class="row input-group align-items-center justify-content-center" data-bind="visible: pageCount > 1">
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, 0)">«</button>
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, page() - 1)">‹</button>
<div class="ml-1" style="width:4rem">
<input class="text-right form-control form-control-sm" type="number" data-bind="value: page" />
</div>
<span class="mx-1" data-bind="text: ' / ' + (pageCount) "></span>
<button class="align-middle btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, page() + 1)">›</button>
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, pageCount)">»</button>
</div>
Those data-bind attrs are my knockout bindings fyi.
Here's what it's rendered as using Chrome:
As you can see, the guillemets are slightly below vertical center of the buttons. I've tried applying all the bootstrap vertical align classes I can think of (align-items-center, align-middle, text-center, etc) to the parent div and to the buttons, but have had no luck so far.
Problem is in your HTML entities. it has by default space in it. see below example.
.btn span {
border: 1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h3>With Html entity</h3>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>«<span></button>
<h3>Without Html entity</h3>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>A</span></button>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>a</span></button>
I created an exact snippet with bootstrap-4 cdn and its looking fine, below is the snippet
<link href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row input-group align-items-center justify-content-center">
<button class="btn btn-sm mx-1"><i class="fas fa-angle-double-left"></i></button>
<button class="btn btn-sm mx-1"><i class="fas fa-angle-left"></i></button>
<div class="ml-1" style="width:4rem">
<input class="text-right form-control form-control-sm" type="number" />
</div>
<span class="mx-1"></span>
<button class="align-middle btn btn-sm mx-1"><i class="fas fa-angle-right"></i></button>
<button class="btn btn-sm mx-1"><i class="fas fa-angle-double-right"></i></button>
</div>
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?