What is the best way to align buttons side by side in Laravel 6.0 with the help of bootstrap? I attempted to do so but they end up appearing one above the other

I experimented with this approach to get them side by side

  • Below is the CSS I attempted using form-inline and display:inline, but neither worked as expected

Button Code:

                <td>
                    <div class="container ">
                       <a href="/miembros/{{$item->id_miembro}}/correos" class="btn btn-dark btn-sm">View</a>
                       <a href="/correos/create" class="btn btn-dark btn-sm">Add</a>
                    </div>
                </td>

Here's my custom CSS code:

<style>
          body {
                padding-top: 56px;
          background-image: url("/fondoevento.jpg");
          background-size: cover;
            }

      .dropnegro{
  color: #141519;
  text-align: center;

       }
      nav.navbar {
            background: #141519;
            background: linear-gradient(to right, #424448, #B7BCCD);
        }
        .tamano{
          font-size: 16px;
        }
        .tope{
            margin-top: 10px;
        }
        .centro{
            text-align: center;
        }
        .in{
            display: inline;
        }
</style>

Answer №1

Give this a shot, simply include the btn-inline class within your div element.

<td width="20%"> // feel free to modify the width
   <div class="container btn-inline">
...

Update your css file with the following code.

.btn-inline a{ display: inline-block; }

Answer №2

To achieve the desired horizontal layout, consider utilizing a flex display...

If using bootstrap, you can attain this by incorporating the d-flex class on the parent element...

<td>
    <div class="d-flex">
        <a href="/miembros/{{$item->id_miembro}}/correos" class="btn btn-dark btn-sm">View</a>
        <a href="/correos/create" class="btn btn-dark btn-sm">Add</a>
    </div>
</td>

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

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

Issue with JAWS screen reader failing to announce aria-expanded status

My aim is to ensure that the collapsed state is accessible in both NVDA and JAWS, but I am encountering issues with it displaying properly in JAWS. Does anyone have any suggestions on how to rectify this? I have included images of the code and link list b ...

Which design pattern does Bootstrap v4 utilize for handling click events?

Trying to decipher this code snippet: $(document).on( Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()) ) This particular piece is related to the Alert component: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/alert.js I a ...

Having issues with the JavaScript voting system {{bindings}} returning null when clicked?

It seems like the error is not appearing in the developer tool, so it might be related to how the data is being read. Both {{upVote}} and {{downVote}} start with no value and show null when clicked, indicating that the buttons are somehow linked. I was att ...

What could be causing the responsiveness issue with my react slick carousel?

https://i.sstatic.net/Qv0Pg.jpg import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import Link from "next/link&qu ...

Tips for eliminating inline scripts or HTML injections from input text using JavaScript or jQuery

Although this type of question may have been asked multiple times before, I am confident that this one is unique. On the server side, I have an Input TextArea control and I am attempting to eliminate all inline scripts or HTML injections. I have successful ...

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

Is there a way to align the ticks to the left of the brief text section in HTML and CSS, as shown in the screenshot?

Click here for a snapshot of ticks Greetings, I need some help with aligning blue ticks on the left side instead of above the text as shown in the screenshot. Below is my code snippet, excluding ionicons v2 font () :) If more information is requ ...

Capture Your Scene with Three.js

I am facing an issue where I need to capture a screenshot of a website. I have tried using html2canvas and it is working fine. However, the problem arises because I am using both THREE.WebGLRenderer and THREE.CSS3DRenderer (for HTML in webGL). The screen ...

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

Connected selection menu

I have noticed several discussions on this topic, but many of them rely on JavaScript or focus solely on a standard drop-down list. I have developed a PHP function that generates drop-down menus based on select queries in my database. Currently, this part ...

tips for displaying a label and text side by side on a single line

Is there a way to keep my label and text on the same line by adjusting the CSS? I've tried using float based on suggestions from other posts, but they still end up on different lines. .indentColumn { width: 71px; padding-top: 5%; } .labelColumn ...

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

What could be causing my .load() function to fail when attempting to target a specific div element?

My goal is to retrieve and display a div tag from another aspx page within my container div. Here is the jQuery code: function GetDocumentInfo(url) { $('MyContainer').load(url + ".otherdiv"); } This operation is triggered by a click event. ...

Determine Toggle State in Multiple Ng-Bootstrap Dropdowns in Angular

After receiving a helpful response to my recent question, I have encountered another issue. This time, I am wondering: How can I determine the toggle status in an ng-bootstrap dropdown when multiple dropdowns are present? Attempting to do so only provide ...

Placing an image in context with the background image

Looking for guidance on CSS styling. I have successfully set up a responsive background image on my page and now want to add a circular logo positioned at the bottom center of it. However, I am facing an issue where the logo's position changes when th ...

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

Custom dropdown selection using solely JavaScript for hidden/unhidden options

I'm trying to simplify things here. I want to create a form that, when completed, will print the page. The form should have 3-4 drop-down lists with yes or no options. Some of the drop-downs will reveal the next hidden div on the form regardless of th ...

The gallery refuses to align to the center of the page

I've been attempting to properly align my gallery array in the center of the page. I've experimented with various methods, including: setting margin-left:auto; margin-right:auto using margin:0 auto; adding text-align:center; However, I have no ...

Verify if the value in a textbox exceeds the number entered in an array of textboxes

My goal is to compare the value of a single text box, labeled as "totalmarkstoall", with multiple arrays of text boxes labeled as "marksscored". The JavaScript code below is set up to compare these values using a key up function. The issue I am facing is ...