I have been so far able to achieve how a normal promo box should look like. So when you click on the text the onclick function will trigger and open the input field and "apply" button, and everything is working order.
What I want to achieve is a validation on the input field that if the field is empty and someone is trying to click on "Apply" button. It should give an error message saying "You must enter discount code"
Can someone help me?
$("#promo-code").on("click", function() {
$("#promo-code").hide();
$("#promo-box").show();
$("#codediv").show();
$('.trash-checkout').hide();
});
$('#applybtn').click(function() {
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
});
$('#removecode').click(function() {
$(".checkout-promo-code-input").val('');
$("#codediv").html("").hide();
$('.trash-checkout').hide();
$("#promo-code").show();
});
$('#promo-code-outer').on("click", '#edit-promo-code', function() {
$("#codediv").hide();
$('.trash-checkout').hide();
$("#promo-box").show();
});
.trash-checkout {
color: rgba(0, 0, 0, .7);
cursor: pointer;
font-size: 15px;
}
.trash-checkout:hover {
color: #dc3545;
}
.promo-edit {
font-weight: 600;
color: rgba(0, 0, 0, .7);
font-size: 15px;
}
.promo-edit a {
color: #000000;
}
#promo-code {
text-align: center;
font-size: 15px;
}
#promo-box,
#promo-box-mb {
display: none;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="promo-code-outer">
<div class="mt-3 text-center">Apply a promo code</div>
<div id="promo-box">
<span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span>
<span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span>
</div>
<div class="float-left promo-edit display-none" id="codediv"></div>
<div class="float-right" style="margin-left:50px;">
<span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span>
</div>
</div>
just check the value of the input.
$('#applybtn').click(function() {
if ($("#promo-box input").val()){
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
}
else{
// do your error stuff
}
});
$("#promo-code").on("click", function() {
$("#promo-code").hide();
$("#promo-box").show();
$("#codediv").show();
$('.trash-checkout').hide();
});
$('#applybtn').click(function() {
if ($("#promo-box input").val()){
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
}
else{
$("#promo-box input").css("border-color", "red");
$( "#promo-box" ).append( "<p style='color: red;'>promo code is required</p>" );
}
});
$('#removecode').click(function() {
$(".checkout-promo-code-input").val('');
$("#codediv").html("").hide();
$('.trash-checkout').hide();
$("#promo-code").show();
});
$('#promo-code-outer').on("click", '#edit-promo-code', function() {
$("#codediv").hide();
$('.trash-checkout').hide();
$("#promo-box").show();
});
.trash-checkout {
color: rgba(0, 0, 0, .7);
cursor: pointer;
font-size: 15px;
}
.trash-checkout:hover {
color: #dc3545;
}
.promo-edit {
font-weight: 600;
color: rgba(0, 0, 0, .7);
font-size: 15px;
}
.promo-edit a {
color: #000000;
}
#promo-code {
text-align: center;
font-size: 15px;
}
#promo-box,
#promo-box-mb {
display: none;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="promo-code-outer">
<div class="mt-3 text-center">Apply a promo code</div>
<div id="promo-box">
<span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span>
<span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span>
</div>
<div class="float-left promo-edit display-none" id="codediv"></div>
<div class="float-right" style="margin-left:50px;">
<span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span>
</div>
</div>
Related
Hello I'm developing a budget app following a tutorial via Coding Addict, I'm having trouble with the submitExpenseForm of the code. It's suppose to work when the user submit multiple "expenses" the problem after the first values the "expense.title" & "expense.amount" has been appended to the html the 2nd+ of the entries for the expense form of the app keeps showing up as undefined and NaN and it's been wrecking my brain for the past two days with rewatching the video, research and coming up with some other codes that didn't work. Any tips would be greatly helpful, thank you so much.
//JS tutorial from freecodecamp.org
// window.alert("javascript is loaded and ready!");
class UI {
//setting variables
constructor() {
this.budgetFeedback = document.querySelector(".budget-feedback");
this.expenseFeedback = document.querySelector(".expense-feedback");
this.budgetForm = document.getElementById("budget-form");
this.budgetInput = document.getElementById("budget-input");
this.budgetAmount = document.getElementById("budget-amount");
this.expenseAmount = document.getElementById("expense-amount");
this.balance = document.getElementById("balance");
this.balanceAmount = document.getElementById("balance-amount");
this.expenseForm = document.getElementById("expense-form");
this.expenseInput = document.getElementById("expense-input");
this.amountInput = document.getElementById("amount-input");
this.expenseList = document.getElementById("expense-list");
this.itemList = [];
this.itemID = 0;
}
//submit button budget, function will run the following code
submitBudgetForm(){
// console.log('hello from es6');
const value = this.budgetInput.value;
if(value === '' || value <0){
this.budgetFeedback.classList.add('showItem');
this.budgetFeedback.innerHTML = `<p>field can't be empty or negative.</p>`;
console.log('error message will appear on DOM');
}
else{
this.budgetAmount.textContent = value;
this.budgetInput.value = "";
this.showBalance();
}
}
//show balance
showBalance(){
const expense = this.totalExpense();
//parseInt would convert argument into a string (string of numbers with no [,]).
const total = parseInt(this.budgetAmount.textContent) - expense;
this.balanceAmount.textContent = total;
if(total < 0){
this.balance.classList.remove("showGreen", "showBlack");
this.balance.classList.add("showRed")
}
else if(total > 0){
this.balance.classList.remove("showRed", "showBlack");
this.balance.classList.add("showGreen");
}
else if(total === 0){
this.balance.classList.remove("showRed", "showGreen");
this.balance.classList.add("showBlack");
}
// console.log(`hey I'm getting a hold of 'this' keyword`);
}
//submit expense form function
submitExpenseForm(){
const expenseValue = this.expenseInput.value;
const amountValue = this.amountInput.value;
if(expenseValue === '' || amountValue === '' || amountValue < 0)
{
this.expenseFeedback.classList.add('showItem');
this.expenseFeedback.innerHTML = `<p>field can't be empty or negative.</p>`
}
else {
let amount = parseInt(amountValue);
this.expenseInput = "";
this.amountInput = "";
let expense = {
id:this.itemID,
title:expenseValue,
amount:amount,
}
this.itemID++;
this.itemList.push(expense);
this.addExpense(expense);
this.showBalance();
//show balance
}
}
//add expense
addExpense(expense){
const div = document.createElement('div');
div.classList.add('expense');
div.innerHTML = `<div class="expense-item d-flex justify-content-between align-items-baseline">
<h6 class="expense-title mb-0 text-uppercase list-item">-${expense.title}</h6>
<h5 class="expense-amount mb-0 list-item">${expense.amount}</h5>
<div class="expense-icons list-item">
<a href="#" class="edit-icon mx-2" data-id="${expense.id}">
<i class="fas fa-edit"></i>
</a>
<a href="#" class="delete-icon" data-id="${expense.id}">
<i class="fas fa-trash"></i>
</a>
</div>
</div>
</div>`;
this.expenseList.appendChild(div);
}
//total expense
totalExpense(){
let total = 0;
if(this.itemList.length > 0){
console.log(this.itemList);
}
this.expenseAmount.textContent = total;
return total;
}
}
function eventListeners(){
const budgetForm = document.getElementById('budget-form');
const expenseForm = document.getElementById('expense-form');
const expenseList = document.getElementById('expense-list');
//new UI Class
const ui = new UI()
//budget form submit
budgetForm.addEventListener('submit', function(event){
event.preventDefault();
ui.submitBudgetForm();
});
//expense form submit
expenseForm.addEventListener('submit', function(event){
event.preventDefault();
ui.submitExpenseForm();
})
//expense click (expense value & title edit and trash)
expenseList.addEventListener('click', function(){
})
}
document.addEventListener('DOMContentLoaded', function(){
eventListeners();
})
:root {
--mainWhite: #f5f5f5f5;
--mainDark: #333333;
--mainGreen: #317b22;
--mainRed: #b80c09;
--mainBlue: #05668d;
--mainYellow: yellow;
}
body {
background: var(--mainWhite);
color: var(--mainDark);
}
.budget-feedback,
.expense-feedback {
display: none;
}
.budget-form {
border: 0.15rem solid var(--mainGreen);
padding: 1rem;
border-radius: 0.25rem;
}
.expense-form {
border: 0.15rem solid var(--mainRed);
padding: 1rem;
border-radius: 0.25rem;
}
.budget-submit {
background: transparent;
border: 0.1rem solid var(--mainGreen);
color: var(--mainGreen);
}
.expense-submit {
background: transparent;
border: 0.1rem solid var(--mainRed);
color: var(--mainRed);
}
.expense-submit:hover {
background: var(--mainRed);
color: var(--mainWhite);
}
.budget-submit:hover {
background: var(--mainGreen);
color: var(--mainDark);
}
.budget-input {
border: 0.05rem solid var(--mainGreen) !important;
margin-bottom: 10px;
}
.expense-input {
border: 0.05rem solid var(--mainRed) !important;
}
.expense-group {
margin-bottom: 10px;
}
.expense-amount,
.expense-title {
color: var(--mainRed);
}
.edit-icon {
color: var(--mainBlue);
cursor: pointer;
font-size: 1rem;
text-decoration: none !important;
}
.delete-icon {
color: var(--mainRed);
cursor: pointer;
font-size: 1rem;
text-decoration: none !important;
}
.edit-icon:hover {
color: var(--mainBlue);
}
.delete-icon:hover {
color: var(--mainRed);
}
.showItem {
display: block;
}
.info-title {
font-size: 1.5rem;
}
.budget {
font-size: 1.6rem;
color: var(--mainGreen);
}
.expense {
font-size: 1.6rem;
color: var(--mainRed);
}
.balance {
font-size: 1.6rem;
}
.budget-icon,
.expense-icon,
.balance-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.showRed {
color: var(--mainRed);
}
.showGreen {
color: var(--mainGreen);
}
.showBlack {
color: var(--mainDark);
}
#media screen and (min-width: 992px) {
.budget {
font-size: 2.6rem;
color: var(--mainGreen);
}
.expense {
font-size: 2.6rem;
color: var(--mainRed);
}
.balance {
font-size: 2.6rem;
}
.budget-icon,
.expense-icon,
.balance-icon {
font-size: 3.5rem;
color: var(--mainBlue);
}
}
.list-item {
flex: 0 0 33.33%;
text-align: center;
}
.expense-item {
height: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./fontawesome-free-5.15.2-web/css/all.css">
<link rel="stylesheet" href="./style.css">
<title>UPPERclassman</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--title of app-->
<div class="col-11 mx-auto p-3">
<h3 class="UPPERclassman">UPPERclassman</h3>
</div>
<div class="row">
<div class="col-md-5 my-3">
<!--budget alert message-->
<div class="budget-feedback alert alert-danger text-capitalize">budget feedback</div>
<!---budget form-->
<form id="budget-form" class="budget-form">
<h5>Please enter your budget</h5>
<div class="form-group">
<input type="number" class="form-control budget-input" id="budget-input">
</div>
<!--submit button-->
<button type="submit" class="btn text-capitalize budget-submit" id="budget-submit">calculate</button>
</form>
</div>
<div class="col-md-7">
<div class="row my-3">
<div class="col-4 text-center mb-2">
<h6 class="info-title">Budget</h6>
<span class="budget-icon"><i class="fas fa-money-bill-wave fa-2x"></i></span>
<h4 class="mt-2 budget" id="budget"><span>$</span><span id="budget-amount">0</span></h4>
</div>
<div class="col-4 text-center">
<h6 class="info-title">Expense</h6>
<span class="expense-icon"><i class="far fa-credit-card fa-2x"></i></span>
<h4 class="mt-2 expense" id="expense"><span>$</span><span id="expense-amount">0</span></h4>
</div>
<div class="col-4 text-center">
<h6 class="info-title">Balance</h6>
<span class="balance-icon"><i class="fas fa-hand-holding-usd fa-2x"></i></span>
<h4 class="mt-2 balance" id="balance"><span>$</span><span id="balance-amount">0</span></h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 my-3">
<div class="expense-feedback alert alert-danger text-capitalize">expense feedback</div>
<form id="expense-form" class="expense-form">
<h5 class="text-capitalize">please enter your expense</h5>
<div class="form-group expense-group">
<input type="text" class="form-control expense-input" id="expense-input">
</div>
<div class="form-group expense-group">
<input type="number" class="form-control expense-input" id="amount-input">
</div>
<button type="submit" class="btn text-capitalize expense-submit" id="expense-submit">add expense</button>
</form>
</div>
<div class="col-md-7 my-3">
<div class="expense-list" id="expense-list">
<div class="expense-list__info d-flex justify-content-between text-capitalize">
<h5 class="list-item">expense title</h5>
<h5 class="list-item">expense value</h5>
<h5 class="list-item"></h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jquery -->
<!-- <script src="js/jquery-3.3.1.min.js"></script> -->
<!-- bootstrap js -->
<!-- <script src="js/bootstrap.bundle.min.js"></script> -->
<!-- script js -->
<script src="budget.js"></script>
</body>
</html>
These two lines:
this.expenseInput = "";
this.amountInput = "";
are clearing your reference to the controls.
Perhaps they should be:
this.expenseInput.value = "";
this.amountInput.value = "";
I am working on a website in Bootstrap 4, that has a search bar.
I want to toggle between focus and blur attaching both events to the #group-search input element. I was looking for a clear and concise way to make this work, like the hover() method works:
$('#group-search input').hover(function() {
$(this).closest('div').removeClass('dark');
}, function() {
$(this).closest('div').addClass('dark');
});
#group-search {
padding: 5px;
}
#group-search input:focus {
outline: none !important;
box-shadow: none;
}
#group-search.dark input,
#group-search.dark button {
color: #444;
}
#group-search.dark button {
border: none;
background: #ddd;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
<input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
<div class="input-group-append">
<button class="btn btn-danger" type="submit">Search</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
The way I use focus and blur events, to my surprise, does not work.
$('#group-search input').on('focus', function() {
$(this).closest('div').removeClass('dark');
}, 'blur', function() {
$(this).closest('div').addClass('dark');
});
#group-search {
padding: 5px;
}
#group-search input:focus {
outline: none !important;
box-shadow: none;
}
#group-search.dark input,
#group-search.dark button {
color: #444;
}
#group-search.dark button {
border: none;
background: #ddd;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
<input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
<div class="input-group-append">
<button class="btn btn-danger" type="submit">Search</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Where is my mistake?
Your syntax is wrong, here is how you should use it
$('#group-search input').on({
focus: function() {
$(this).closest('div').removeClass('dark');
},
blur: function() {
$(this).closest('div').addClass('dark');
}
});
#group-search {
padding: 5px;
}
#group-search input:focus {
outline: none !important;
box-shadow: none;
}
#group-search.dark input,
#group-search.dark button {
color: #444;
}
#group-search.dark button {
border: none;
background: #ddd;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
<input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
<div class="input-group-append">
<button class="btn btn-danger" type="submit">Search</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
See here: https://learn.jquery.com/events/handling-events/#many-events-and-handlers
You can bind both events and just toggle the class.
$('#group-search input').on('focus blur', function() {
$(this).closest('div').toggleClass('dark');
});
#group-search {
padding: 5px;
}
#group-search input:focus {
outline: none !important;
box-shadow: none;
}
#group-search.dark input,
#group-search.dark button {
color: #444;
}
#group-search.dark button {
border: none;
background: #ddd;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="group-search" class="input-group dark">
<input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
<div class="input-group-append">
<button class="btn btn-danger" type="submit">Search</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Is it possible to target specific Slick Carousel arrows? I'm building a table with 3 columns running as a carousel and would like to delete the remaining prev/next arrows.
Here is an example:
When you run the code snippet below, please expand it to 'full page' for best results.
Thanks so much in advance!
Here is what I currently have setup:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
});
</script>
</body>
</html>
When your slider runs, the arrows are represented with the classes .slick-next and .slick-prev
From there, your solution should just be an easy CSS solution. You can add a class or id to differentiate the main slider from the others.
I think an elegant solution would be to put a class called .no-arrows on your sliders that don't need arrows, and then use a CSS selector to hide its arrows:
.no-arrows .slick-next,
.no-arrows .slick-prev {
display: none;
}
Here's a demo:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.no-arrows .slick-next,
.no-arrows .slick-prev {
display: none!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider no-arrows">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider no-arrows">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
});
</script>
</body>
</html>
I add slider-main class to the first slider, that I use to select sliders that needed to disable arrows, and using slider method $(slider).slick('slickSetOption', 'option', value, refresh); did update arrows value...
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider slider-main">
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
$('.slider:not(.slider-main)').slick('slickSetOption', 'arrows', false, true);
});
</script>
</body>
</html>
what I try is to have a simple Accordion that changes it text before you open it, it displays show credits and when it's open the text should change to close credits does someone knows how to do it? saw it on some sites and I wonder how to do it in jquery
<!-- credits -->
<div class="credits">
<a class="show-credits" data-toggle="collapse" href="#credits" role="button"
aria-expanded="false" aria-controls="collapseExample">
Show Credits
</a>
<div class="collapse" id="credits">
<div class="card card-body">
<div class="credits-body">Credits text .....
</div>
</div>
</div>
</div>
<!-- /. credits -->
Thanks!
Here is an example of what you wish to do
https://codepen.io/wadleo/pen/mzMgpL
I used bootstrap and listen to its events on accordion open and close with jquery. Have fun.
https://codepen.io/wadleo/pen/mzMgpL
$(function() {
$("#paperback").on("hide.bs.collapse", function(){
$(".pp-but").html('Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>');
});
$("#paperback").on("show.bs.collapse", function(){
$(".pp-but").html('Paperback Open <span class="pull-right"><i class="fa fa-minus"></i></span>');
});
});
span, p {
line-height: 1.2;
font-family: Perpetua, sans-serif!important;
}
a {
color: black;
font-size: 15px;
font-family: Perpetua, sans-serif!important;
}
a:hover {
text-decoration: none;
}
.btn-theme {
padding: 10px 20px;
font-size: 15px;
background: white;
border-radius: 0px;
border: solid 2px #FF7F50;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
}
.btn-theme:hover {
background-color: #FF7F50;
color: white;
}
.book-adds {
margin-top: 5%;
}
.book-adds span {
width: 50%;
}
.book-adds-cont {
width: 200px;
height: 35px;
padding: 8px;
display: block;
border-radius: 5px;
margin-bottom: 5%;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="col-xs-6 book-adds">
<span type="button" class="pp-but" data-toggle="collapse" data-target="#paperback">Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>
</span>
<br>
<span id="paperback" class="collapse">
<a class="btn btn-theme" href="">Buy</a>
</span>
<br>
</div>
You can use accordionbeforeactivate event as:
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
//
} );
Below you can find a simple demo:
$(function(){
$( "#accordion" ).accordion();
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
var oldHeaderText = ui.oldHeader.text()
var newHeaderText = ui.newHeader.text()
ui.oldHeader.text(oldHeaderText.replace(' - Open', ''));
ui.newHeader.text(newHeaderText + ' - Open');
} );
});
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Section 1 - Open</h3>
<div>
<p>
Paragraph 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Paragraph 2
</p>
</div>
</div>
</body>
</html>
Hello i need some small help.
when i click one of the first 5 buttons(these buttons have no value(like input field)), a button group with 3 numbers 1 ,2 and 3 is displayed.
when i click on one of these buttons, the value(number) from the button i have clicked override the value(text) from the button i have first clicked.
my problem: all the buttons have been overrided from the value(text) of the number i have clicked.
$(function() {
var l = $("div.col-xs-12").length;
function getRndInteger(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
$("div#gr.btn-group").hide();
$(".bt").click(function() {
$("div#gr.btn-group").show();
});
$(".btt").click(function() {
$('.bt').text($(this).text());
$("div#gr.btn-group").hide();
});
});
.btn-group button {
background-color: #103c52;
border: 1px solid #1b1d1b;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
border-radius: 10px;
margin-left: 5px;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
button.bt,
button.btt {
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 60px;
height: 40px;
border: 2px solid black;
border-radius: 5px;
}
button.bt {
font-size: 25px;
/* text-align: center; */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="jquery-ui.min.js"></script> -->
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<!-- <link rel="stylesheet" href="jquery-ui.min.css"> -->
<!--google font api garamond-->
<link href="https://fonts.googleapis.com/css?family=Song+Myung" rel="stylesheet">
<div class="col-xs-12 " style="text-align: center;">
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
</div>
<div class="container-fluid">
<div class="col-xs-12 " style="text-align: center;">
<div class="btn-group" id="gr">
<button class="btt">1</button>
<button class="btt">2</button>
<button class="btt">3</button>
</div>
</div>
</div>
This happens because you're assigning the text to all the buttons in this statement:
$('.bt').text($(this).text());
You may instead store a reference to the placeholder button (see the clicked variable in the following snippet) and then when a value button is clicked, assign the text to the saved reference only
$(function() {
var l = $("div.col-xs-12").length;
var clicked = null;
function getRndInteger(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
$("div#gr.btn-group").hide();
$(".bt").click(function() {
clicked = $(this);
$("div#gr.btn-group").show();
});
$(".btt").click(function() {
clicked.text($(this).text());
clicked = null;
$("div#gr.btn-group").hide();
});
});
.btn-group button{background-color:#103c52;border:1px solid #1b1d1b;color:#fff;padding:10px 24px;cursor:pointer;float:left;border-radius:10px;margin-left:5px}.btn-group:after{content:"";clear:both;display:table}.btn-group button:not(:last-child){border-right:none}.btn-group button:hover{background-color:#3e8e41}button.bt,button.btt{font-family:inherit;font-size:inherit;line-height:inherit;width:60px;height:40px;border:2px solid #000;border-radius:5px}button.bt{font-size:25px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 " style="text-align: center;">
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
<button class="bt"></button><br>
</div>
<div class="container-fluid">
<div class="col-xs-12 " style="text-align: center;">
<div class="btn-group" id="gr">
<button class="btt">1</button>
<button class="btt">2</button>
<button class="btt">3</button>
</div>
</div>
</div>
PS: I've removed extra CSS/JS files from the snippet so that the snippet looks clear.