I made this code. I need the two first buttons take me to other page but it is not working. I am usin href.
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</button>
<button type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
If you want link, use a tag, not button:
<a class="btn btn-link btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
try a tag instead of button tag
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<a type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
<a type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</a>
<a type="button" class="btn btn-danger btn-lg btn-block">SALIR</a>
</div>
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Enviar SMS</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Agregar número de celular</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
You have to use <a> tag. You can't add href to <button>
You need to update your code as below:-
used a tag instead of button. And also checked the required refrences of bootstrap Scripts (JS and CSS).
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
Enviar SMS<br>
Agregar número de celular<br>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
</body>
</html>
and also use:-
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
This should be
HTML
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">
Enviar SMS
</button>
<button type="button" class="btn btn-primary btn-lg btn-block">
Agregar número de celular
</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
Related
First of all I am a noob of CSS. Also I am using bootstrap framework. I have a question. Recently I created a set of buttons and they are viewable on mobile devices too.
Desktop view:
https://i.stack.imgur.com/C8JCp.png
Mobile view:
https://i.stack.imgur.com/IBPP0.png
So what I want to do is I need to give some small space between rows on mobile device view.
Like this: https://i.stack.imgur.com/fU55k.png
My Code:
<?php
include "header.php";
include "navbar.php";
?>
<div style="text-align: center;">
<button type="button" class="btn btn-info">January</button>
<button type="button" class="btn btn-info">February</button>
<button type="button" class="btn btn-info">March</button>
<button type="button" class="btn btn-info">April</button>
<button type="button" class="btn btn-info">May</button>
<button type="button" class="btn btn-info">June</button>
<button type="button" class="btn btn-info">July</button>
<button type="button" class="btn btn-info">August</button>
<button type="button" class="btn btn-info">September</button>
<button type="button" class="btn btn-info">October</button>
<button type="button" class="btn btn-info">November</button>
<button type="button" class="btn btn-info">December</button>
</div>
<?php
include "footer.php"
?>
Anyone help for this? Thanks in Advance. Also sorry for my bad English.
So for that you have to set bottom margin of 5px for all buttons like below
.btn-Margin{
margin-bottom : 5px
}
<div style="text-align: center;">
<button type="button" class="btn btn-info btn-Margin">January</button>
<button type="button" class="btn btn-info btn-Margin">February</button>
<button type="button" class="btn btn-info btn-Margin">March</button>
<button type="button" class="btn btn-info btn-Margin">April</button>
<button type="button" class="btn btn-info btn-Margin">May</button>
<button type="button" class="btn btn-info btn-Margin">June</button>
<button type="button" class="btn btn-info btn-Margin">July</button>
<button type="button" class="btn btn-info btn-Margin">August</button>
<button type="button" class="btn btn-info btn-Margin">September</button>
<button type="button" class="btn btn-info btn-Margin">October</button>
<button type="button" class="btn btn-info btn-Margin">November</button>
<button type="button" class="btn btn-info btn-Margin">December</button>
</div>
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
I want 20 buttons in 4x5 fashion on desktop but on mobile 10x2 fashion. Here is my jfiddle
<div class="container">
<div class="col-md-12">
<button type="button" style="background-color:white" class="btn btn-default btn-square">white</button>
<button type="button" style="background-color:#F7F6E4" class="btn btn-default btn-square">Beige</button>
<button type="button" style="background-color:#3BA6F8" class="btn btn-default btn-square">Blau</button>
<button type="button" style="background-color:#F36660" class="btn btn-default btn-square">Rot</button>
<button type="button" style="background-color:#FDFCEA" class="btn btn-default btn-square">Creme</button>
</div>
<div class="col-md-12">
<button type="button" style="background-color:#DBDBDB" class="btn btn-default btn-square">Graue</button>
<button type="button" style="background-color:#E6C08E" class="btn btn-default btn-square">Eiche</button>
<button type="button" style="background-color:#358B9F" class="btn btn-default btn-square">Petrol</button>
<button type="button" style="background-color:#FF7ECD" class="btn btn-default btn-square">Rosa</button>
<button type="button" style="background-color:#C9C9C9" class="btn btn-default btn-square">Silber</button>
</div>
<div class="col-md-12">
<button type="button" style="background-color:#505558;color:white;" class="btn btn-default btn-square">Anthrazit</button>
<button type="button" style="background-color:C39881" class="btn btn-default btn-square">Taupe</button>
<button type="button" style="background-color:#569A9E" class="btn btn-default btn-square">Trukis</button>
<button type="button" style="background-color:#A03A97" class="btn btn-default btn-square">Lila</button>
<button type="button" style="background-color:#FFDB53" class="btn btn-default btn-square">Gold</button>
</div>
<div class="col-md-12">
<button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-default btn-square">Schwarz</button>
<button type="button" style="background-color:#A16340" class="btn btn-default btn-square">Braun</button>
<button type="button" style="background-color:#C9DDA8" class="btn btn-default btn-square">Grun</button>
<button type="button" style="background-color:#FFB24A" class="btn btn-default btn-square">Orange</button>
<button type="button" style="background-color:#FFFD5E" class="btn btn-default btn-square">Gelb</button>
</div>
</div>
I could not find anything useful online. I am not using any trick here. Basically I am using button sizes so that it appears in 5 column and then it should appear in 2 column on mobile, but it does not work.
If you want to write less code and avoid so many col-* classes...Use Flexbox
Updated Fiddle
Stack Snippet
.btn-row {
display: flex;
flex-wrap: wrap;
}
.btn.btn-square {
flex: 0 0 calc(20% - 10px);
border-radius: 0;
margin: 5px;
}
#media (max-width:576px) {
.btn.btn-square {
flex: 0 0 calc(50% - 10px);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<h1 class="text-center">Bootstrap Buttons</h1>
<div class="container">
<div class="btn-row">
<button type="button" style="background-color:white" class="btn btn-default btn-square col-md">white</button>
<button type="button" style="background-color:#F7F6E4" class="btn btn-default btn-square">Beige</button>
<button type="button" style="background-color:#3BA6F8" class="btn btn-default btn-square">Blau</button>
<button type="button" style="background-color:#F36660" class="btn btn-default btn-square">Rot</button>
<button type="button" style="background-color:#FDFCEA" class="btn btn-default btn-square">Creme</button>
<button type="button" style="background-color:#DBDBDB" class="btn btn-default btn-square">Graue</button>
<button type="button" style="background-color:#E6C08E" class="btn btn-default btn-square">Eiche</button>
<button type="button" style="background-color:#358B9F" class="btn btn-default btn-square">Petrol</button>
<button type="button" style="background-color:#FF7ECD" class="btn btn-default btn-square">Rosa</button>
<button type="button" style="background-color:#C9C9C9" class="btn btn-default btn-square">Silber</button>
<button type="button" style="background-color:#505558;color:white;" class="btn btn-default btn-square">Anthrazit</button>
<button type="button" style="background-color:C39881" class="btn btn-default btn-square">Taupe</button>
<button type="button" style="background-color:#569A9E" class="btn btn-default btn-square">Trukis</button>
<button type="button" style="background-color:#A03A97" class="btn btn-default btn-square">Lila</button>
<button type="button" style="background-color:#FFDB53" class="btn btn-default btn-square">Gold</button>
<button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-default btn-square">Schwarz</button>
<button type="button" style="background-color:#A16340" class="btn btn-default btn-square">Braun</button>
<button type="button" style="background-color:#C9DDA8" class="btn btn-default btn-square">Grun</button>
<button type="button" style="background-color:#FFB24A" class="btn btn-default btn-square">Orange</button>
<button type="button" style="background-color:#FFFD5E" class="btn btn-default btn-square">Gelb</button>
</div>
</div>
Using bootstrap3
With bootstrap3 you have to use col-offset class to align 5 elements in a row.
Fiddle Link
What you want is custom. The only question is: do you want this change in columns widths to apply to all pages/columns or to a particular section of your site?
For site-wide changing number of columns, go to https://getbootstrap.com/docs/3.3/customize/#grid-system, change 12 to 10 and download the result.
If you only want it applying on a particular section, first of all add a .row between .container and .col-*-* (it's quite important). Secondly, add a class to your .row, to distinguish it from other .rows in your website. For this example, I used the class 10-cols:
And add this to your CSS, to override the width of those cols:
.\31\30-cols > * {
width: 50%;
}
#media (min-width: 992px) {
.\31\30-cols > * {
width: 20%;
}
}
However, there still seems to be a logical problem. You say you want the buttons divided as: 5 x 4 on large and 2 x 10 on small. Great. Let's take the contents of each of your columns from large and arrange them nicely in two columns on mobile. We put first, third, and fifth columns on left and second and fourth on right. But you want the contents of 5th to be divided in both columns, right?
So you probably want to put all your buttons inside one single element and either use flexbox or CSS columns to display them as you want.
So you need to display this column as full width on mobile and further divide its contents in two columns:
.\31\30-cols > [class^="col-md"] {
width: 50%;
}
.\31\30-cols > .col-xs-12 {
width: 100%;
}
#media (min-width: 992px) {
.\31\30-cols > [class^="col-md"] {
width: 20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row 10-cols">
<div class="col-md-12 col-xs-6">
<button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
<button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
<button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
<button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
</div>
<div class="col-md-12 col-xs-6">
<button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
<button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
<button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
<button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
</div>
<div class="col-md-12 col-xs-6">
<button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
<button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
<button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
<button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
</div>
<div class="col-md-12 col-xs-6">
<button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
<button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
<button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
<button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
</div>
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-xs-6 col-md-12">
<button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
<button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
</div>
<div class="col-xs-6 col-md-12">
<button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
<button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
</div>
</div>
</div>
</div>
</div>
As a side-note, given the order of the buttons is not really important, the sane method here would have been to put all the buttons in one column and arrange them using either flexbox:
.\31\30-cols .col-xs-12 {
display: flex;
flex-wrap: wrap;
}
.\31\30-cols .col-xs-12 .btn {
flex: 1 0 calc(50% - 20px);
margin: 5px;
}
#media (min-width: 992px) {
.\31\30-cols .col-xs-12 .btn {
flex-basis: calc(20% - 10px);
}
}
.\31\30-cols .col-xs-12 {
display: flex;
flex-wrap: wrap;
}
.\31\30-cols .col-xs-12 .btn {
flex: 1 0 calc(50% - 20px);
margin: 5px;
}
#media (min-width: 992px) {
.\31\30-cols .col-xs-12 .btn {
flex-basis: calc(20% - 10px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row 10-cols">
<div class="col-xs-12">
<button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
<button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
<button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
<button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
<button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
<button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
<button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
<button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
<button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
<button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
<button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
<button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
<button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
<button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
<button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
<button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
<button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
<button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
<button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
<button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
</div>
</div>
</div>
or CSS columns:
.\31\30-cols .col-xs-12 {
columns: 2;
column-gap: 10px;
}
#media (min-width: 992px) {
.\31\30-cols .col-xs-12 {
columns: 5;
}
}
.\31\30-cols .col-xs-12 {
columns: 2;
column-gap: 10px;
}
#media (min-width: 992px) {
.\31\30-cols .col-xs-12 {
columns: 5;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row 10-cols">
<div class="col-xs-12">
<button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
<button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
<button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
<button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
<button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
<button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
<button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
<button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
<button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
<button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
<button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
<button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
<button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
<button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
<button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
<button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
<button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
<button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
<button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
<button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
</div>
</div>
</div>
I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
Try to put them inside btn-toolbar or some other container.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.
I am trying to group buttons using btn-toolbar(not using btn-group because I want different buttons) and I also want to add label at top of each button but I am unable to achieve what I am trying to. here is the code snippet.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
</div>
here is picture of what i am expecting
Here is the solution you need. It works as per the image you have shown
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap btn-tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.labelarrange1{
float:left;
position:relative;
left:5px;
top:8px;
font-size:10px;
}
.btn{
border-radius:0;
background:powderblue;
border-radius:0;
}
</style>
</head>
<body>
<div class="btn-toolbar container" role="toolbar" aria-label="Toolbar with button groups">
<div class="row">
<div class="col-md-1">
<label class="labelarrange1">Relay 1</label>
<br>
<button type="button" class="btn btn-lg">A</button>
</div>
<div class="col-md-1">
<label class="labelarrange1">Relay 1</label>
<br>
<button type="button" class="btn btn-lg">A</button>
</div>
<div class="col-md-1">
<label class="labelarrange1">Relay 3</label>
<br>
<button type="button" class="btn btn-lg" style="background:#eee;">O</button>
</div>
</div>
</div>
</body>
</html>
you can use this
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
</div>
i may not be totally correct.. try using some seperation techniques.