Hey I am trying to make the left middle right buttons from this source.
So I started with
npm install bootstrap#3
After that I installed jQuery because of the description of the demo page
npm install jquery
My code is exactly the same as from the demo page but all I get is this:
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
Here you go with a solution https://jsfiddle.net/ppL8stkv/
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
</div>
</div>
You might have missed bootstrap library. Check the jsfiddle.
Hope this will help you.
Related
I am trying to recreate Microsoft Windows 10 calculator (check it out for reference). I am unable to align all my buttons since the buttons contain different letters and symbols. I want my all buttons to be exactly the same size and be next to each other with no spaces in between them.
Also, while posting this I noticed that my display is sticking out to the right more. Any idea for a fix?
Link to HTML and CSS combined:
https://codepen.io/anon/pen/jpLOjP
HTML:
<body>
<form id="calculatorForm">
<input type="text" id="display">
<div class="row">
<!--percent-->
<button type="button" onclick="calculate()">%</button>
<!--sq root-->
<button type="button" onclick="calculate()">√</button>
<!--x^2-->
<button type="button" onclick="calculate()">x²</button>
<!--1/x-->
<button type="button" onclick="calculate()">¹⁄<sub>x</sub></button>
</div>
<div class="row">
<button type="button" onclick="calculate()">CE</button>
<button type="button" onclick="reset()">C</button>
<!-- remove -->
<button type="button" onclick="calculate()">⇍</button>
<button type="button" onclick="calculate()">÷</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">7</button>
<button type="button" onclick="calculate()">8</button>
<button type="button" onclick="calculate()">9</button>
<button type="button" onclick="calculate()">×</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">4</button>
<button type="button" onclick="calculate()">5</button>
<button type="button" onclick="calculate()">6</button>
<button type="button" onclick="calculate()">−</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">1</button>
<button type="button" onclick="calculate()">2</button>
<button type="button" onclick="calculate()">3</button>
<button type="button" onclick="calculate()">+</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">±</button>
<button type="button" onclick="calculate()">0</button>
<button type="button" onclick="calculate()">⋅</button>
<button type="button" onclick="calculate()">=</button>
</div>
</form>
</body>
CSS:
#display {
font-size: 90px;
width: 100%;
}
form {
background: #eee;
border: solid grey;
display: block;
margin: 0 auto;
width: 450px;
padding: 10px;
}
.row {
font-size: 0px;
text-align: center;
margin: 0 auto;
}
.row button {
width: 25%;
height: 60px;
font-size: 40px;
font-family: calibri;
}
You're looking for vertical-align.
.row button{
vertical-align: middle;
}
I have a box with items which have a display: inline-block. In the case that items in the box don't fill the whole line, I would need to align the content in the middle, but items to the left.
I have tried to set up the whole content in inline-block, but this works only if there is just one line of items, not two or more lines. Also, I need it to be responsive, so no fixed indent can be used.
Screen:
Code:
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display: inline-block;
text-align: left;
}
.btn{
width: 100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
You can remove display:inline-block; from the parent container but keep it in the child elements.
For your other container you can go:
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
Set the max-width to whatever suits you.
EDIT: I'm aware that this is not a perfect solution to what you wanted, but as far as I'm concerned what you want is not possible without some scripts.
This snippet can also be found on jsFiddle
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
.btn{
width:100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
Just add width to .inner
.inner{
width: 80%; /* ADD THIS to set width of container */
display: inline-block;
text-align: left;
}
As you can see by background-color (jsFiddle), it works, but sometimes your buttons just doesn't fit an empty space and wrap to next line.
To solve this you would need to use css media queries or bootstrap for example. Using bootstrap you can easily make your buttons to adjust their width to available space ( jsFiddle )
Similar to the button toolbar, I'm trying to implement a colour coded likert scale in my view (I'm using ASP.net) with labels on either side.
"not dangerous" [1][2][3][4][5] "dangerous"
[dark green][light green][yellow][orange][red]
https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4
Any ideas? Thanks!
2 part answer:
Likert - use a disabled .btn-link either side
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Safe</a>
<button type="button" class="btn btn-default likert-1">1</button>
<button type="button" class="btn btn-default likert-2">2</button>
<button type="button" class="btn btn-default likert-3">3</button>
<button type="button" class="btn btn-default likert-4">4</button>
<button type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Dangerous</a>
</div>
</div>
Color - just override the '.btn' colouring:
.btn.likert-1 { background-color: darkgreen; color: yellow; }
.btn.likert-2 { background-color: lightgreen; color: brown; }
.btn.likert-3 { background-color: yellow; color: brown; }
.btn.likert-4 { background-color: orange; color: white; }
.btn.likert-5 { background-color: red; color: white; }
/* Choose better colors tho! */
See this JSFiddle for an example.
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
<div id="reading-sidebar" class="col-xs-3 panel-default">
<div id="reading-sidebar-title" class="panel-heading">Options
<button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
<div id="reading-sidebar-contents" class="panel-body">
<ul class="sidebar-button-list">
<button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button><br>
<button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br>
<button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br>
<button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br>
<button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</ul>
</div>
</div>
The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
<div id="reading-sidebar" class="col-xs-3 panel-default"></div>
<div id="reading-sidebar-contents" class="panel-body">
<div class="btn-group-lg btn-group-vertical">
<button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>
If I get your question right. Do you mean this:
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
#reading-sidebar
{
width:80%;
margin:0 auto;
}
#reading-sidebar-contents button
{
width:100%;
margin:0 auto;
}
Link: https://jsfiddle.net/66bk2rfc/1/
I suggess You to do it like this:
.btn {
width: 100%;
height: 56px;
padding-left: 2% !important;
}
.btn i {
left: 10px;
width: 10%;
top: 25%;
height: 50%;
}
.btn.pull-left {
text-align: left;
}
Also if you just want only these affect to sidebar buttons, add
#reading-sidebar .btn { } ETC...
If you want it not 100% width and centered, You should do it like this,
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)
Made this Bootply example and I'm wondering how can I get the same width for normal button and a button group consisting of 3 buttons.
Tried it with an css extension but I don't think that is the correct way in sense of the bootstrap grid system.
I know that there is something like .btn-group-justified but using of that class also changes the first ("<") and last element (">") width, but they should be fixed.
Any ideas?
.menu_button {
min-width: 170px;
max-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
How's this?
I created a separate class for grouped buttons so that they could have separate stylings.
SIDE NOTE
Bootstrap buttons are styled to be responsive as the viewport changes. So styling them as you did may work, but may not be responsive unless you add your own media queries in CSS to change the size of them as the viewport changes.
.menu_button {
min-width: 170px !important;
max-width: 200px !important;
}
.menu_button_grouped {
min-width: 104px !important;
max-width: 134px !important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
I hope this helps!
.buttons-group {
min-width: -webkit-fill-available;
justify-content: space-evenly;
}
.button-group {
width: -webkit-fill-available;
}