Tips on creating horizontally aligned buttons with full width

Currently, I am facing an issue while attempting to create three equal-sized buttons laid out horizontally. However, what I have accomplished so far is displaying three full-width buttons stacked vertically. Here's the code snippet:

<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
   <br>
   <br>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div>

The current output can be viewed https://i.sstatic.net/LDTUb.png.

Is there a way for me to position them horizontally while still utilizing the full width?

javascripthtmljquerycssbootstrap-4

Answer №1

Bootstrap provides a robust Grid system that allows you to create layouts using the classes row for rows and col for columns.

The col class follows a numbering system from 1-12, representing the column width. The total width of a row should not exceed 12. You have the flexibility to design your layout as needed, including nesting the row and col classes to achieve the desired grid structure. More information on Bootstrap Grid can be found here.

For example:

<div class="row">
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
    </div>
</div>

Code snippet example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
    </div>
</div>

Answer №2

Encase them within a div element, omit the btn-block class, and introduce the col class for automatic column allocation, as shown below:

<div class="row">
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
        Password</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

javascriptreactjstwitter-bootstrapbootstrap-4

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

htmlcss

As you scroll, the header gradually reduces in size, but at the point where the reduction occurs, a slight flick

As I develop a website, I have implemented a sticky header that shrinks after scrolling past the window height. I experimented with two versions - one using Vanilla-JS and another with jQuery. Both versions work fine, but the issue arises when the header s ...

javascriptjqueryhtmlcss

The functionality of jQuery Repeater is not functioning properly within a partial that was generated via ajax request

While working on a form with multiple steps generated in ajax within a single page, I encountered an issue with using jquery.repeater in one of the intermediate steps. The code specific to the repeater is encapsulated in a dedicated partial. However, I f ...

jqueryajaxoctobercmsoctobercms-pluginsoctober-partial

Javascript - Array checking for overlapping numeric ranges

I am currently working with an array of time ranges that have both start and end values. var timeRanges = [{ start: 120, end: 140 },{ start: 180, end: 220 },{ start: 250, end: 300 }] My task requires me to determine if the selecte ...

javascriptarrayssortingrangeoverlapping

Strip certain tags from HTML without including iframes

Removing specific tags from HTML can be tricky, especially when working with PHP and JavaScript. One approach is to fetch an HTML page in a PHP file using curl and getJSON, storing the result in a .js file. However, this method may encounter issues with mu ...

phpjavascriptjqueryhtmlregex

The functionality of new Date() is inconsistent when encountering a daylight savings time switch

In my current situation, I am facing an issue when passing "year, month, date, time" to the Date() function in order to retrieve the datetime type. Utilizing Google Chrome as the browser. The Windows system is set to the EST timezone (-05:00). Daylight S ...

javascriptangulartypescript

Adding more rows to the array and then inserting them into the database

Seeking some clarity and appreciation in advance for any assistance! I've organized an array of information within a table that I can edit and then sync with my database once updated. <input type='button' value='add row' id=&a ...

phpjavascriptjquerymysql

Create a Bootstrap 5 app with a two-column layout, featuring a fullscreen display and scrolling

I am currently experimenting with Bootstrap 5 to design a full-screen webpage with two columns, consisting of a header and a footer. Each column will hold content that exceeds the available space, necessitating individual scrollbars. One of the columns als ...

htmltwitter-bootstrapbootstrap-5

Comparison of Chrome's compatibility with Bootstrap and Edge

Firefox Safari I am facing an issue that seems obvious, but I am unable to pinpoint the exact cause. It just doesn't seem right for no apparent reason. is the website in question. I have tried various troubleshooting methods such as inspecting th ...

javascripthtmlcssfrontendbootstrap-5

Is it possible to apply action.payload to multiple keys within an object?

My plan for updating tasks in my Todo app is as follows: addTask: (state, action) => { const newTask = { id: uniqueId(), text: action.payload, completed: false, date: action.payload, }; state.push(newTas ...

javascriptreactjsreduxreact-reduxredux-toolkit

Obtaining image URLs from a specific folder

I am working on creating a jQuery slideshow and I want to gather all the image URLs from a folder without manually writing them. It seems like I need to use Ajax, but I am a little confused. Ultimately, I want to access the variable stored in an array in m ...

phpjqueryajaximage

Uh oh! An error occurred when trying to submit the form, indicating that "quotesCollection is not defined" in Mongodb Atlas

Displayed below is my server.js file code, along with the error message displayed in the browser post clicking the Submit button. const express = require('express'); const bodyParser = require('body-parser'); const MongoClient = require ...

javascriptnode.jsmongodbexpress

Angular JS Profile Grid: Discover the power of Angular JS

I came across an interesting example that caught my attention: http://www.bootply.com/fzLrwL73pd This particular example utilizes the randomUser API to generate random user data and images. I would like to create something similar, but with manually ente ...

javascripthtmlarraysangularjstwitter-bootstrap-3

Props in Vue components are exclusively accessible within the $vnode

Exploring the realm of Vue.js, I am tasked with constructing a recursive Component renderer that transforms JSON into rendered Vue components. The recursive rendering is functioning smoothly; however, the props passed to the createElement function (code b ...

javascriptvue.js

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

javascriptjqueryhtmlcssbutton

A guide to transporting an item from coordinates {x,y} to {newx,newy} using Three.js

Given the coordinates X and Y of an object, where Z is always 0, I am seeking a way to smoothly move this object to a new location using Three.js, with a visible animation rather than suddenly appearing in a different spot. UPDATE: Below is a sample code ...

javascriptthree.js

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver

The radio button's functionality for clicking does not function properly in Internet Explorer

My issue is causing frustration, and despite my efforts, I can't seem to find a solution. The problem arises when calling this partial view from two different pages: <div id="NotificationStatusSuspensionDiv"> <p> <str ...

jqueryinternet-explorer

Avoiding React App from refreshing when form is submitted

Every time I hit the enter key while typing in the form, the application refreshes. My goal is to capture the input from the form as a value and set the state with that value. <form> <input value={input} disabled= ...

javascriptreactjsformsbuttoninput