Bootstrap 5: inline aligning divs without changing container-CodePudding

I've been working on finding a solution to this, and cannot seem to find anything that works. I am trying to make some general components for a system using Bootstrap 5, and have defined a button as:

<div >
<button type="button" >Foo Bar</button>
</div>

When users place this in their container in the system, it automatically generates an outer container:

<div >
//button
</div>

So, if the users try to place 2 buttons, the code will look like:

<div >
<div >
<button type="button" >Foo Bar</button>
</div>
</div>
<div >
<div >
<button type="button" >Foo Bar</button>
</div>
</div>

How do I inline these buttons and also be able to change the alignment on them? It is not possible for me to add classes to the outer container of the divContainers.

I hope someone can shed some light on this problem for me. Thanks.

CodePudding user response：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Example</title>
  </head>
  <body>

    <!-- Example Code -->
    
    <div >
      <button type="button" >Foo Bar</button>
      <button type="button" >Foo Bar</button>
    </div>
    
    <!-- End Example Code -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

<div >
  <button type="button" >Foo Bar</button>
  <button type="button" >Foo Bar</button>
</div>

CodePudding user response：

use Bootstrap 5 class d-inline to align them Docs here

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
    <div >
        <button type="button" >Foo Bar</button>
    </div>
</div>
<div >
    <div >
        <button type="button" >Foo Bar</button>
    </div>
</div>

<div >
<div >
        <div >
            <button type="button" >Foo Bar</button>
        </div>
    </div>
    <div >
        <div >
            <button type="button" >Foo Bar</button>
        </div>
    </div>