label positioned above every button in the button group

Question

label positioned above every button in the button group

I'm trying to organize buttons using btn-toolbar (not using btn-group because I want different buttons) and also want to add a label at the top of each button. However, I am having trouble achieving my desired result. Here is the snippet of code I have:

<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 a picture showing what I am expecting

html css twitter-bootstrap

Answer 1

Answer №1

Here is a custom solution tailored to your specific needs, designed based on the image you provided:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Custom Button Toolbar</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 2</label>
          <br>
          <button type="button" class="btn btn-lg">B</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>

Answer 2

Here is a custom solution tailored to your specific needs, designed based on the image you provided:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Custom Button Toolbar</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 2</label>
          <br>
          <button type="button" class="btn btn-lg">B</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>

Answer 3

Answer №2

here is a helpful tip

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <label>b</label>
  <button type="button" class="btn btn-lg output_border">B</button>
  <label>b</label>
  <button type="button" class="btn btn-lg output_border">B</button>
  <label>c</label>
  <button type="button" class="btn btn-lg output_border">C</button>
  <label>d</label>
  <button type="button" class="btn btn-lg output_border">D</button>
  <label>e</label>
  <button type="button" class="btn btn-lg output_border">E</button>
  <label>f</label>
  <button type="button" class="btn btn-lg output_border">F</button>
</div>

it's important to keep things organized for better clarity.

Answer 4

here is a helpful tip

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <label>b</label>
  <button type="button" class="btn btn-lg output_border">B</button>
  <label>b</label>
  <button type="button" class="btn btn-lg output_border">B</button>
  <label>c</label>
  <button type="button" class="btn btn-lg output_border">C</button>
  <label>d</label>
  <button type="button" class="btn btn-lg output_border">D</button>
  <label>e</label>
  <button type="button" class="btn btn-lg output_border">E</button>
  <label>f</label>
  <button type="button" class="btn btn-lg output_border">F</button>
</div>

it's important to keep things organized for better clarity.

label positioned above every button in the button group

Answer №1

Answer №2

Similar questions

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

Confirm Submission Issue in HTML Form

Guide on incorporating CSS into a JavaScript function

Retrieve the input value closest to the selected row

Event Listener for Spelling Quiz Buttons: Check Correct and Incorrect Answers

What is the best way to include some white space around a paragraph?

What could be the reason for the active class not being triggered by Bootstrap?

Tips for identifying modifications in an input text field and activating the save button

Retrieve information from HTML elements

Extract the HTML field value from an AJAX drop-down selection, rather than relying on user input

Repositioning a jQuery function from inside a plugin

Creating form components in a row

Can ngFor be utilized within select elements in Angular?

Positioning Alignment for a CSS Layout with Two Columns

Using a form tag within a table in HTML5

The imported font used in Firefox is displaying with a striking underline text-decoration

In Android Kitkat 4.4.4, the Ionic navbar displays icons vertically when using the <ion-buttons end> feature

AngularJS call to the web service

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

What are some methods for simulating user interaction on input and button elements?