How can buttons be placed dynamically next to each other using Bootstrap?

I currently have the following code snippet:

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

While this code helps to display two buttons, how can I dynamically make the buttons occupy 50% of the container width each?

For example, if I add 4 <a> tags in the code:

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

It would look like this:

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>
<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

Is it possible to achieve this within one container (button-box)?

Extra CSS I added:

.button-box {
  text-align:center;
  margin-top:20px;
 }
csstwitter-bootstrapbootstrap-4

Answer №1

apply display: flex to the button-box container.

.button-box {
  text-align: center;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  /* to wrap the button */
}

.button-wrapper {
  width: 50%;
  /* width of the button */
  padding: 0 5px;
  /* to add some spaces between buttons */
  margin-bottom: 10px;
  /* margin for button */
}

.btn-info {
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="button-box col-lg-12">
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
  </div>
</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

What is the best way to target the first child element in this scenario?

Is there a way to target only the p tag with id="this" using .root p:first-child selector? Here is the code snippet: Link to CodePen .root p:first-child { background-color: green; } p { margin: 0; } .container { display ...

htmlcss

Exploring the mobile navigation options with NextJS and Bootstrap

Utilizing bootstrap in combination with NextJS for my navbar has presented a challenge due to the dynamic page transitions with React and Next on mobile devices. The issue arises when the menu remains open after clicking a link and loading a new page. I h ...

reactjstwitter-bootstrapnext.js

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

htmlcss

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

jquerycss

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

htmlcssaspect-ratio

Tips for utilizing fontawesome effectively in a select menu

I'm having trouble displaying fontawesome icons in a select element, as they do not appear correctly in the drop-down list. .FontAwesomeSelect { font-family: Font Awesome\ 5 Free; font-size: 18px; } <link href="https://use.fontaw ...

cssfont-awesomefont-awesome-5

Is there a way to implement CSS transitions when hiding elements?

My bootstrap navbar collapses and displays items outside of it. However, when I hide the menu, the overlay div disappears immediately and does not transition smoothly with the menu. How can I apply a transition to the div when hiding the menu? I've t ...

cssreactjsbootstrap-4

The syntax error in the Svelte conditional element class is causing issues

Trying to create an if block following the Svelte Guide for if blocks. The process appears straightforward, yet Svelte is flagging it as a syntax error: [!] (svelte plugin) ParseError: Unexpected character '#' public\js\templates\ ...

javascriptcsssvelte

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

htmlcsssass

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

What is the best way to create a dropdown menu that smoothly slides in from the bottom of the screen?

Is it possible to create dropdown menus in the navigation bar that slide in from the bottom with a smooth transition effect, similar to this example: Although I am working on building my own template, so my code may differ from the original theme. Here is ...

javascripthtmlcss

Is there a way to use HTML alone to center a navigation link without using CSS?

Can I center these navigation links using only HTML without needing CSS? The navigation links are currently aligned to the left and I would like to center them on the webpage. <ul class="nav nav-tabs" id="myTab" role="tablist&q ...

htmljquerybootstrap-4

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

htmlcss

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

javascriptjqueryhtmlcss

Tips for deleting an additional empty line while styling a <ul> bulleted list?

I'm working on creating a vertical menu positioned on the left side of the screen. To achieve this, I utilized an online CSS button generator to style my <li> tags within the menu structure. However, I've encountered an issue where an extra ...

htmlcss

Positioning a fixed element in relation to a specific DIV: Tips and Tricks

An issue I am facing is with a DIV element that needs to always be positioned in the upper right corner of another DIV. Initially, using absolute positioning seems like the solution, but when the parent DIV has a scroll function, the first DIV disappears f ...

htmlcss

What is the method for assigning columns exclusively on desktop in Bootstrap 5?

Is there a way in Bootstrap 5 to create equal-width columns on desktop, but have them appear as 6 columns on mobile devices? I attempted the following code snippet but it did not produce the desired result: <div class="container"> <di ...

twitter-bootstrapbootstrap-5

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

javascriptcssreactjsmaterial-design