I'm trying to make circular tabs menu using bootstrap 4. I have tried below code using buttons and displaying inline.
I have attached the expected out image below.So first button will be active by default. Only the active button background should have color. Remaining all should be in grey colour. Can any one let me know how to achieve that
Here is the code
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<body class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</body>
</html>
You need some Javascript for this:
turn all buttons to gray on the first click i.e. add 'blank' class
turn the button that was clicked to blue i.e. add 'active' class
you had all types of classes to start off with, which is why !important is needed to force our color through... but for your requirement, you don't need all these colored classes
$(document).ready(function() {
$(".btn").click(function() {
$(".btn").each(function() {
($(this).hasClass('blank')) ? null: $(this).addClass('blank');
($(this).hasClass('active')) ? $(this).removeClass('active'): null;
});
$(this).addClass('active');
});
});
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
.btn.btn-sm.btn-circle.blank {
background: lightgray;
border-color: lightgray;
}
.btn.btn-sm.btn-circle.active {
background-color: blue !important;
border-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</div>
Related
i am trying to make a nav bar with horizontal overflow auto it gets vertical overflow auto i tried giving the span display flex but then the text in side buttons goes down and it also have no effect on overflow can anyone help please
my code
#navigationBar {
display: flex;
justify-content: center;
text-align: center;
border: 1px solid;
border-right: none;
border-left: none;
height: 40px;
background: white;
overflow-x: auto;
}
#navigationBar span {
display: flex;
overflow-x: auto;
}
.options {
font-size: 15px;
padding: 6;
margin: 4;
font-family: monospace;
border-radius: 15px;
border: 1px solid;
}
<nav id="navigationBar">
<span id="catogory">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
<span>
</nav>
First thing, the snippet you provided has CSS and HTML together with no proper syntax.
Second thing, you don't need extra span, so you can remove it.
At last, just update your CSS with the below changes, and it will work.
Note- As you mentioned that the button's text goes down, so giving it a style white-space: nowrap; would do the job.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#navigationBar {
display: flex;
border: 1px solid;
border-right: none;
border-left: none;
padding: 20px 0;
background: white;
overflow-x: auto;
}
.options {
display: inline-block;
padding: 6px;
border-radius: 15px;
margin: 4px;
border: 1px solid;
white-space: nowrap;
font-family: monospace;
font-size: 15px;
}
</style>
</head>
<body>
<nav id="navigationBar">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
</nav>
</body>
</html>
A image I designed on Figma:
My attempt:
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
width: 65.750981091687478%;
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
I wanna a page number button like this image but I don't know how to make space between 1,2,3 button. The space between the buttons is 15.08px. If you find some drawback from my code pls notice me.
Try adding the flex properties to your .no class instead and update the width.
If you're just wanting a simple way to get spacing between your elements just set a desired width without using calc and space-between will do the rest.
If you're looking to get the exact spacing you desire then I recommend using calc to calculate what the width of the parent element should be to fit your required spacing.
My calculation explained:
Multiply the width of the 3 number elements (45.24px * 3)
Add that to the multiplication of the exact spacing you want between the number elements (15.08px * 2), in this case multiplying the desired spacing by 2 since you have 3 elements and only require 2 spaces in between.
Note that if you use the calc method you will have to update the calculation each time you update the number of elements you want to display.
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(45.24px * 3 + 15.08px * 2);
padding: 0 12px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
<style>
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45px;
margin-right: 15.08px;
}
.no :nth-last-child(1) {
margin-right: 0px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
</style>
Remove the width on no and set margin-right on numbers will do.
Do you mean something like this?
button {background: yellow; border-radius:50%}
<button>1</button>
<button>2</button>
<button>3</button>
Hi to get space between your number button you just need to apply margin like margin: 0 5px or something on your number class and if you want to remove lines which is on number button apply text-decoration: none on anchor tag
like that...
<style type="text/css">
.pagenumber {
/*display: flex;*/
/*width: 252.27px;*/
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
width: 65.750981091687478%;
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
margin: 0 5px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
text-decoration: none;
font-weight: bold;
}
</style>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class=""><</button>
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
<button class="">></button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
As you can see the steps in image are not centered well. May be someone has some suggestions how to center it properly ?
CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
HTML:
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
FIDDLE
I'm assuming you're talking about the horizontal distance between the steps not being of equal size. This is due to the text of the step, e.g. Uploading, being part of the table cell. The width of the table is distributed to the table cells based on the width of their contents, a cell with more text will therefore become wider than one with less text.
The easiest way to solve this might be to take the text of the step outside of the document flow by giving it a position: absolute, width: 100% and text-align: center.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
.stepwizard-step p {
position: absolute;
width: 100%;
text-align: center;
}
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
go by this code it may work out
html
<div class="stepwizard">
<div class="stepwizard-row row">
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
css code
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard {
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
text-align: center;
position: relative;
/*width: 70px*/
}
jsfiddle
change only stepwizard-row:before top 14px to 18px it's center vertically.
I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.
The result should look similar to this with a full height button on the right:
The base for my considerations looks like this:
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
Here is my attempt to make a tag list out of it (please note that it should have multiple lines)
HTML:
<div class="container-fluid">
<div class="input-group">
<div class="form-control">
<ul>
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
... even more labels ...
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
</ul>
<input type="text">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
CSS:
ul {
padding-left: 0;
display: inline;
list-style-type: none;
}
li {
display: inline-block;
}
Running demo in fiddle
However, that doesn't work as expected.
To create the tag portion, you can use bootstrap-tagsinput by Tim Schlechter and then style it similar to Bootstrap's Input Group with some custom styling like this:
Demo in jsFiddle & Stack Snippets
.input-group .bootstrap-tagsinput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%
}
.input-group-btn {
height: 0px;
}
.input-group-btn .btn {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<div class="input-group">
<input type="text"
class="bootstrap-tagsinput form-control"
data-role="tagsinput"
value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Dismissable Alert
If you're just trying to style a removable element, you can do that similar to Bootstrap's Dismissable Alert, with some custom styling which will look like this:
Demo in jsFiddle & Stack Snippets:
.alert.alert-tag {
display: inline-block;
padding: 5px;
padding-bottom:2px;
margin: 5px;
}
.alert-tag.alert-dismissible {
padding-right: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Label
</div>
You need edit your item for something like this:
<span class="tag label label-primary">Primary<span data-role=
"remove"></span></span>
Add this to your css:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
And... add bootstrap-tagsinput to your from-group before ul:
<div class="form-control bootstrap-tagsinput">
I ran into a strange issue while building my wordpress site. All links that are inside the bootstrap buttons are not active in firefox.
What could cause this?
Here's the html output:
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
Here's the css:
.home #primary #home-more .btn {
background-image: url("../img/home-button-sprite-more.png");
background-repeat: no-repeat;
margin-right: 0px;
background-color: transparent;
padding: 13px 40px;
background-position: 20px 0px;
}
button.btn {
display: inline-block;
padding: 13px 24px;
margin-bottom: 0px;
margin-right: 10px;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: medium none;
border-radius: 0px 0px 0px 0px;
white-space: nowrap;
-moz-user-select: none;
}
Instead of,
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
You have to use,
<a href="http://domain.dev/?cat=4" name="View all News">
<button class="btn pull-right" role="button">
All News
</button>
</a>
Or,
<a href="http://domain.dev/?cat=4" title="View all News" class="btn pull-right">
All News
</a>
Try what #Devo has suggested else try this
<a class="btn btn-primary" href="http://domain.dev/?cat=4">All News</a>
Hope this helps.
Use this:
<div class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</div>
I think it should work