First of all hi and thanks for your time!
I have a problem that I can't solve with bootsrap, I'm trying to center 2 buttons inside a div, in this code the buttons are aligned left, how can I center them?
Here is my code:
<div class="align-self-center">
<button type="button" class="btn btn-outline-primary"> BTN1</button><button type="button" class="btn btn-success">BTN2</button>
</div>
Use text-center class provided by bootstrap to align your buttons.
<div class="text-center">
<button type="button" class="btn btn-outline-primary">BTN1</button>
<button type="button" class="btn btn-success">BTN2</button>
</div>
The text-center class is basically doing -
text-align:center;
P.S. Not sure what .align-self-center is doing here
Suggestion - I see that you are using bootstrap 4. You can also use the class "btn-group" if it meets your requirements.
Click here to go to bootstrap 4 docs
Related
I'm using Bulma css and would like to make buttons the same size. Currently, each button has different size depending on the button title.
The only options I'm finding is "is-fullwidth", but that's too big.
Anyone can help me?
This is not possible with bulma classes (except for the is-fullwidth one), but you could make your own global class that you can add to buttons. e.g.:
.button.is-wide {
min-width: 250px;
}
Write as many column elements as you may need, inside a columns class element. Then put one button inside each column element with the is-fullwidth class.
<div class="columns">
<div class="column is-2">
<button class="button is-outline is-primary is-fullwidth" id="acceptBtn">Ok</button>
</div>
<div class="column is-2">
<button class="button is-outline is-secondary is-fullwidth ml-5" id="cancelBtn">Discard changes</button>
</div>
</div>
In this example I put only two buttons, but they can be as many as you need.
The column elements will set the width and the button class is-fullwidth will expand the button to the available width of its container.
If you want this solution with less verbose code, try this:
<div class="columns">
<button class="button is-outline is-primary is-fullwidth column is-2" id="acceptBtn">Ok</button>
<button class="button is-outline is-secondary is-fullwidth ml-5 column is-2" id="cancelBtn">Discard changes</button>
</div>
Adding the is-fullwidth column is-2 classes directly to a <button> is also valid.
I noticed there are similar questions however I tried the given solutions and nothing worked *
My custom CSS file is 100% linked correctly to the html file I'm working on *
I'm using Bootstrap v4.3.1 *
So as the title suggests, I'm trying to align text inside a Bootstrap button - I need to do that using my own custom CSS file.
I've created my new style.css file and linked it in the header (AFTER the Bootstrap CSS link), then I added a custom class (btn1) to my Bootstrap button:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I then added the following code in my CSS:
.btn1{
text-align: left !important;
}
But the text on the button is still not aligned to the left. Any insights as for why it happens, and ways to solve the problem?
Thanks!
You will need to change the padding on your custom css to 0, as this is still picking up the bootstrap padding. Then you can set the width to whatever size you like and add custom padding if you wanted.
Example:
.btn1{
text-align: left !important;
padding: 0;
width: 50px;
}
Buttons in bootstrap are inline-block elements and do not have defined width. Therefore, text-align: left does not work.
You need to specify width of it explicitly and use align-left. And if you need to remove event the left padding, use pl-0.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col">
<button class="btn btn-primary pl-0">Button</button>
</div>
<div class="col">
<button class="btn btn-primary w-100 text-left">Button</button>
</div>
<div class="col">
<button class="btn btn-primary pl-0 w-100 text-left">Button</button>
</div>
</div>
</div>
https://codepen.io/anon/pen/MMgxKz
Try this way 👇
.btn.btn1{
text-align: left;
min-width:250px;
}
note this way you don't need to add !important
I want to achieve a very simple goal: I have a line - text aligned to left and a button to right. And I want the text to be vertically aligned to button's label. I tried to play with padding, margins,... but nothing worked. I believe there is a simple and smart solution I am missing.
Plunker demo:
https://plnkr.co/edit/KwRF2uOmKc3aPFQW9DXn?p=preview
<div>
<span>
This text should match the "Submit" text
</span>
<button type="button" class="btn btn-secondary float-right">Submit</button>
</div>
Thank for your answers.
Bootstrap 4 is based on flexbox, so already has classes for applying those alignment utilities. d-flex makes the container a flex container, and align-items-center does the vertical alignment. Try something like:
<div class="d-flex align-items-center">
<span>
This text should match the "Submit" text
</span>
<button type="button" class="btn btn-secondary ml-auto">Submit</button>
</div>
I have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.
And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.
I remember seeing websites that have navigation bars which work somewhat like this..
This is what my code currently looks like:
<div class="modal-body">
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
</div>
The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:
Is there a bootstrap way to achieve that? Or is a css hack necessary?
I would rewrite the HTML to look like this.
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
</div>
</div>
You will need to add a media query to css
button{
width: 170px
}
#media (max-width: 540px){
button{
width: 100%;
}
}
For best results add a parent class to button
if you are using Bootstrap then you should be able to use the 'col' CSS selector
you should be able to apply a container (or row) class depending how much of the screen you want to fill, then apply 'col-md-4 col-sm-12' (depending on the breakpoint you want it to go 100%) to all the buttons you shouldn't write the CSS inline like the example above use the bootstrap classes...
link to the bootstrap documentation http://getbootstrap.com/
Please refer to the Bootstrap grid system documentation to understand more about Col settings on different sizes.
http://getbootstrap.com/css/#grid
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>