I'm trying to get the buttons on my webpage to be side by side in the middle of the page, these are the 2 bootstrap 5 classes I've attempted and they aren't as I want them to look:
- https://gyazo.com/c23f2eade4614380aec547b11e61387a
- https://gyazo.com/e40a678b02c9f641f746b1cfbe83d03f
For reference, some questions will have answers with multiple buttons (up to 10: https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a), I would also like them to be equally spaced in a row, something like this: https://gyazo.com/ca1ab61aa7fef54f1cf1a099cb56a5e0
I'm not sure if this changes anything but the buttons are added using a for loop in javascript.
Any tips would be much appreciated, I've been quite stuck on this
CodePudding user response:
You could wrap the buttons in a flex
, and then control the width of your flex-div using custom css, or Bootstrap Grid System. JSFiddle
<div class="row">
<div class="col-6 mx-auto">
<div class="d-flex align-items-center justify-content-evenly">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</div>
</div>
</div>
CodePudding user response:
Use the flex
CSS in the example, the counter
is just for numbering the buttons, it's not required.
.center {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
counter-reset: button;
}
.btn::before {
counter-increment: button;
content: counter(button);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<section class='row'>
<div class='col center'>
<button class='btn btn-primary btn-lg'></button>
<button class='btn btn-primary btn-lg'></button>
<button class='btn btn-primary btn-lg'></button>
<button class='btn btn-primary btn-lg'></button>
<button class='btn btn-primary btn-lg'></button>
</div>
</section>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Add a element that fill have all the buttons, in your css folder, style that div with these styles:
{
display:flex; align-item:center;
justify-content: space-around;
}
If they are many buttons, let the display: flex;
, to be display: inline-flex;
.
CodePudding user response:
You dont need any classes by default they will align themselfs in a row and we can use text-center on the container to make them centered horizontally
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<button class="btn btn-primary" type="submit">Button</button>
<button class="btn btn-primary" type="submit">Button</button>
<button class="btn btn-primary" type="submit">Button</button>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
You dont need bootstrap for that. You can easily do alignment using flex layout. Bootstrap can be used for only styling elements.
Read More: a-guide-to-flexbox
.container{
margin-top:20px;
display: flex;
}
.container{
display: flex;
}
.cl-1{
justify-content: center;
}
.cl-1 button{
margin-right: 20px;
}
.cl-2{
justify-content: space-between;
}
.cl-3{
justify-content: space-evenly;
}
.cl-4{
justify-content: space-around;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Center align</h2>
<div class="container text-center cl-1">
<button class="btn btn-primary" type="submit">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<h2>space-beetween</h2>
<div class="container text-center cl-2">
<button class="btn btn-primary" type="submit">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<h2>space-evenly</h2>
<div class="container text-center cl-3">
<button class="btn btn-primary" type="submit">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<h2>space-around</h2>
<div class="container text-center cl-4">
<button class="btn btn-primary" type="submit">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>