I have three bootstrap button groups with 3 buttons each. I would like them to come below each other so that it becomes a grid of size 3 X 3. Also there should not be any space between two button rows. What's the best way to do it.
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-up fa-rotate-315"></i>
</button>
<button type="button" class="btn btn-default btn-sm"">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-up fa-rotate-45"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-home"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down fa-rotate-45"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down fa-rotate-315"></i>
</button>
</div>
You can use display: table; to the btn-group class. may be it will work.
.btn-group{
display: table;
}
Related
I'm building my NavBar in ReactJS using bootstrap 4.
I would like to take some element at the center of the navbar and others on the right.
In this particular case I would like to have the logout icon on the right.
This is the current situation:
This is the current code:
render () {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{
!localStorage.getItem('token') &&
<button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
}
{
localStorage.getItem('token') &&
<div className="mx-auto order-0">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup className="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
}
</nav>
);
}
And this is what I would like to have:
Here's what you will have to do:
You don't even have to over-write the flex properties. The bootstrap nav comes with display flex & space-around property by default.
Group your html content as shown -
A. navbar-brand
B. a parent div that contains the elements you want in the center
C. your logout button
Remove the margin auto class(mx-auto order-0) classes from your code. This is the culprit.
Change your react code to:
render() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{!localStorage.getItem("token") && (
<button className="btn btn-dark" onClick={this.loginClicked}>
Login
</button>
)}
{localStorage.getItem("token") && (
<React.Fragment>
<div className="first-part">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg" />
<sup className="notification-badge">
<span class="badge badge-success">1</span>
</sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg" />
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg" />
</button>
</div>
<div className="second-part">
<button
className="btn btn-outline-danger btn-lg"
onClick={this.logoutClicked}
>
<i class="fas fa-sign-out-alt fa-lg" />
</button>
</div>
</React.Fragment>
)}
</nav>
);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<nav class="flex-container navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" to="/"> App
</a>
<div class="first-part">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup class="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
<div class="second-part">
<button class="btn btn-outline-danger btn-lg">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
You can use display: flex, and align-content: space-between like so:
.wrapper{
width: 100%;
}
.mid_to_right{
padding-left: 50%;
background-color: red;
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
justify-content: space-between;
}
.left{
display: flex;
flex-flow: row nowrap;
}
.icon{
width: 50px;
height: 50px;
background-color: yellow;
}
.left .icon{
background-color: green;
}
<div class="wrapper">
<div class="mid_to_right">
<div class="left">
<div class="icon">
</div>
<div class="icon">
</div>
<div class="icon">
</div>
</div>
<div class="right">
<div class="icon">
</div>
</div>
</div>
</div>
As explained here and here you have to consider the width of adjacent flexbox items to ensure the center content is actually centered in the viewport.
The simplest method using Bootstrap 4 would be to use the w-100 utility classes to ensure the 3 separate flexbox children always fill the width equally, and then align as desired...
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand">
<a class="navbar-brand w-100" to="/">
App
</a>
<div class="d-flex">
<div class="text-nowrap">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-star fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
<sup><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
</div>
<div class="w-100 text-right">
<button class="btn btn-outline-danger btn-lg" onclick="{this.logoutClicked}">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
https://www.codeply.com/go/SRy82V3M76
I have a table with elements that goes outside a modal:
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
I tried to use word-wrap but it's still the same, and I want to adjust these elements inside that table cell.
MODAL CODE:
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;">
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I fix it ?
I'd like your help.
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I have a div where I want to use a full-width button group with 3 button.
The 2nd and the 3th button "text" will be only font-awesome icons, so I want them to be smaller than the 1st. (For example 60%-20%-20%)
I tried this snippet (I didn't used the "other two are smaller" style yet, so it have to be a 33%-33%-33% buttongroup)
<div class="btn-group btn-group-justified">
<button class="btn btn-default disabled">
{{$buttonText}}
</button>
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
But the whole btn-group only occupies the 25% of the div. Why?
To use justified button groups with <button> elements, you must wrap each button in a button group. See bootstrap documentation here: With <button> elements
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-default disabled">
asdasd
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
I would use grid layout for my rescue. My btn no longer is restricted by width of the content.
<div class="row">
<button class="col-xs-10 btn btn-primary">
BTN 1
</button>
<button class="col-xs-1 btn btn-warning">
<i class="fa fa-edit"> BTN 2</i>
</button>
<button class="col-xs-1 btn btn-danger">
<i class="fa fa-trash"> BTN 3</i>
</button>
I have reduced the width of the button and want to align the glyphicon in the center.
Here is my code:
<div class="btn-group btn-toggle">
<button class="btn btn-primary btn-sm" type="button" style="width:20px">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet"></span>
</button>
<button class="btn btn-default btn-sm" type="button">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet-alt"></span>
</button>
</div>
Here is a bootply link: http://www.bootply.com/HYU6Nff6bk#
How can it be done?
The button still uses padding-left: 10px; and padding-right: 10px;
If you want to have a button with a width of 20px, then reduce padding-left and padding-right to zero.
<div class="btn-group btn-toggle">
<button class="btn btn-primary btn-sm" type="button" style="width:20px; padding-left: 0px; padding-right: 0px;">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet"></span>
</button>
<button class="btn btn-default btn-sm" type="button">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span>
</button>
</div>
I have three likert scales similar to:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
CodePen
However would like the first button of each scale to be placed exactly under each other for them to be uniform.
Any simple solutions?
give a min-width to your a
.btn-link {
min-width: 130px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Controllable</a>
<button id="control1" type="button" class="btn btn-default likert-1">1</button>
<button id="control2" type="button" class="btn btn-default likert-2">2</button>
<button id="control3" type="button" class="btn btn-default likert-3">3</button>
<button id="control4" type="button" class="btn btn-default likert-4">4</button>
<button id="control5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Totally Controllable</a>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Dangerous</a>
<button id="danger1" type="button" class="btn btn-default likert-1">1</button>
<button id="danger2" type="button" class="btn btn-default likert-2">2</button>
<button id="danger3" type="button" class="btn btn-default likert-3">3</button>
<button id="danger4" type="button" class="btn btn-default likert-4">4</button>
<button id="danger5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Dangerous</a>
</div>
</div>
Simplest answer is to put a width styling on the link using 300px in the following example:
<a class="btn btn-link disabled" disabled style="width:300px">Not Fearsome</a>
This would force all the leading statements to be the same width. I would suggest adding a class and doing via the CSS:
//css
.leftSide{width:300px}
<a class="leftSide btn btn-link disabled" disabled>Not Fearsome</a>
you could also pull the links out of the button-group and have them to each side in their own divs:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
</div>
<div class="col-md-10">
<div class="btn-group" role="group" aria-label="...">
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
</div>
</div>
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
Even though #dippas commented that the class wasn't needed and was the accepted answer, the fact is that his solution is increasing the width of the last <a> of each line unnecessarily.
A simple and clean way to achieve what you want is using:
.btn-link:first-child {
display:inline-block;
width: 150px;
}
That way, of the <a> with the class btn-link, you will only select the first that appears inside the <div class="btn-group">.
You need to add display property to change the width of the a tag.
.btn-link {
display: inline-block;
min-width: 110px;
}