XQA
Back to Python
2026-04-225 min read

Vertical Button Group (Python Programming)

Learn Vertical Button Group (Python Programming) step by step with clear examples and exercises.

Title: Vertical Button Group (Python Programming)

Why This Matters

In web development, creating visually appealing and user-friendly interfaces is crucial. One essential element of such interfaces are buttons, which can be arranged vertically to save space and improve navigation. In this lesson, we will learn how to create a vertical button group using Python and the popular Flask framework. This skill is valuable for developers who want to build dynamic web applications with an intuitive user interface.

A vertical button group allows you to organize multiple buttons in a compact, columnar layout. This can be particularly useful when space is limited or when you want to provide users with quick access to several options. By mastering the creation of vertical button groups, you'll be able to build more efficient and user-friendly web applications.

Prerequisites

Before diving into the vertical button group, you should have a basic understanding of:

  1. Python programming language
  2. HTML and CSS basics
  3. Flask framework (a micro web-framework for Python)
  4. Jinja2 templating engine (used by Flask to render HTML templates)
  5. Bootstrap 4, a popular CSS framework that provides pre-designed components and layouts for faster web development
  6. Familiarity with the div, button, and CSS classes
  7. Basic understanding of how to create and run a Flask application

Core Concept

To create a vertical button group in a Flask application, we will use Bootstrap 4's grid system and its predefined classes for buttons (.btn) and button groups (.btn-group).

First, let's create a new Flask project:

pip install flask
mkdir vertical_button_group
cd vertical_button_group
touch app.py templates index.html requirements.txt

Now, open the app.py file and set up a basic Flask application:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True)

Next, open the templates/index.html file and add the following HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical Button Group</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
{% block content %}
<!-- Vertical Button Group -->
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="btn-group" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
</div>
</div>
{% endblock %}
</body>
</html>

Now, run the Flask application:

python app.py

Open your browser and navigate to http://127.0.0.1:5000/. You should see a web page with a vertical button group.

Customizing Vertical Button Groups

You can customize the appearance of your vertical button group by using various Bootstrap classes for buttons and modifying their styles using CSS. For example, you can change the background color, font size, or padding of the buttons.

<div class="btn-group" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
</div>

In the above example, we've added the btn-lg class to make the first button larger and used different Bootstrap colors for the other buttons.

Worked Example

Let's create a more complex example by adding additional buttons, customizing the styles, and handling clicks using JavaScript.

First, update the index.html file to include more buttons:

<!-- ... -->
<div class="btn-group" role="group" aria-label="Vertical button group">
<button id="btn1" type="button" class="btn btn-primary">Button 1</button>
<button id="btn2" type="button" class="btn btn-secondary">Button 2</button>
<button id="btn3" type="button" class="btn btn-warning">Button 3</button>
<button id="btn4" type="button" class="btn btn-danger">Button 4</button>
</div>
<!-- ... -->

Next, add some custom styles to the index.html file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.btn-group {
width: 200px;
}
.btn {
margin-bottom: 5px;
}
</style>

Now, let's add JavaScript to handle button clicks. Open the static/ folder and create a new file called script.js. Add the following code:

document.addEventListener('DOMContentLoaded', function() {
var buttons = document.getElementsByClassName('btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(event) {
alert(`You clicked button ${this.innerHTML}`);
});
}
});

Finally, update the index.html file to include the script:

<!-- ... -->
<script src="static/script.js"></script>
</body>
</html>

Now, when you run the Flask application and click on the buttons, an alert box will appear with the button's label.

Common Mistakes

  1. Forgetting to include Bootstrap CSS: Make sure you link to the Bootstrap CSS file in your HTML file.
  2. Incorrectly defining the btn-group and btn classes: Ensure that you use the correct classes for the button group and buttons, and that they are properly nested within each other.
  3. Not handling button clicks: If you want to perform actions when a button is clicked, don't forget to include JavaScript code to handle those events.
  4. Overlooking the role attribute: Adding the role attribute to the button group helps improve accessibility for screen readers.
  5. Failing to customize styles: Don't forget to add your own CSS rules to customize the appearance of your vertical button group.
  6. Not using a container or row for proper alignment: To ensure that your vertical button group is properly aligned, wrap it in a container and row.

Practice Questions

  1. Modify the vertical button group example to use different Bootstrap colors for the buttons (e.g., btn-info, btn-success, btn-light).
  2. Add a dropdown menu inside the button group by wrapping the btn elements with a ` and adding a Dropdown`. Include at least three items in the dropdown menu.
  3. Create a horizontal button group with four buttons using Bootstrap's grid system (e.g., col-md-3).
  4. Customize the styles of your vertical button group by adding your own CSS rules for the btn, btn-group, and other related classes.

FAQ

Q: What is the purpose of the role attribute in the vertical button group?

A: The role attribute helps improve accessibility for screen readers, allowing them to understand the intended functionality of the button group.

Q: How can I customize the styles of the buttons in my vertical button group?

A: You can customize the styles by adding CSS rules for the btn, btn-group, and other related classes or specific Bootstrap classes like btn-primary, btn-secondary, etc.

Q: Can I use a vertical button group with other frameworks besides Flask and Bootstrap?

A: Yes, you can use a vertical button group in any web development project that supports HTML, CSS, and JavaScript. However, the specific classes and syntax may vary depending on the framework or library you're using.

Vertical Button Group (Python Programming) | Python | XQA Learn