Bootstrap button bottom center of the screen - html

I am new to bootstrap and learning new things and i am trying to bring the bootstrap button to center of the screen at bottom position so far my code is
.bottom-center {
position: absolute;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class='bottom-center'>
<button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

there is no need for any additional CSS to achieve that.
First Thing: use bootstrap 4 instead of 3. (bootstrap 3 is getting too old)
add class fixed-bottom to the button container to make it at the bottom of the screen.
add d-flex justify-content-center to the the button container to make it centered
read more about flex property in bootstrap here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class="fixed-bottom d-flex justify-content-center">
<button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

Related

Align Button in the Vertical Center and Keep it Stationary in Bootstrap

I currently have a bootstrap button that is vertically aligned in a column on the left of the screen. I am using the following code:
<div class="col-sm-1 align-self-center">
<button class="btn btn-primary" type="button">Button</button>
</div>
It looks exactly how I want it to on the page, but I recently noticed that as other modules expand the page downward (I have a collapsable panel in another column), this button shifts down as well. I suspect it continues to align itself with the center of the page as the page's height changes.
My question is whether there was a way to vertically align the button in the center as I currently do but also have it remain stationary should the length of the page change. Any suggestions would be greatly appreciated!
I think your issue requires using a wrapper around the element to give it a static reference in terms of its vertical center.
#wrapper {
height: 500px;
background-color: blue;
color: white;
}
#wrapper a {
margin: 0 auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="wrapper" class="row">
<a class="btn my-auto">Hello!</a>
</div>
<div class="row">
<p>
This is another row, but the one above is centered within the wrapper above.
</p>
</div>
</div>

Aligning text inside a Bootstrap button

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

Bootstrap side by side buttons no gap when buttons rearrange on small screens

So I am able to get two buttons side by side just fine, but when the screen is too small the buttons rearrange from top to bottom (like they should), but the problem is there is no gap between them, for example this is what my buttons look like on a 'normal' sized screen
Example picture 1
But on a small device it looks like this
Example picture 2
As you can see there is now no gap between the buttons when they have rearrange from top to bottom on a smaller device, is there any way to fix this?
Here is a snippet of the HTML used
<div style="text-align: center;">
btn example 1
btn example 2
</div>
You can add just margin in css, then between your buttons will be margin:
<div style="text-align: center;">
btn example 1
btn example 2
</div>
plunker: http://plnkr.co/edit/8B4Wifa8aTqVaFaZcasg?p=preview
Add the following class to your buttons.
.my-sm-1
Or the following, to the last button
.mb-sm-1
And that's it!
More info https://getbootstrap.com/docs/4.1/utilities/spacing/
You could put some margin to each .btn and you really should be using Bootstrap's flex utilities to handle alignment of the buttons.
.btn {
margin: 0.25em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-around flex-wrap">
btn example 1
btn example 2
btn example 3
</div>
<hr/>
<div class="d-flex justify-content-center flex-wrap">
btn example 1
btn example 2
btn example 3
</div>
<hr/>
<div class="d-flex justify-content-between flex-wrap">
btn example 1
btn example 2
btn example 3
</div>

Centring 2 buttons inside a div in bootsrap

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

How to align element inside of many wrapped divs

I have a row div which contains 1 div called horizontal-form, inside this horizontal-form contains other two divs, called form-group, and inside this form-group I have another div, called input-group which contains 1 a tag and 1 span text.I would like to align these span to the most right position. I tried to use class = pull-right but then it aligned to the right position but compared to the nearest div, here is the input-group. Can anyone show me how can I align the span to any position that I wish, for example here i would like to align it to the right position compared to the div row or horizontal-form
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="horizontal-form">
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
FirstItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
SecondItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
</div>
</div>
This happened beacause of "input-group" class as it has "display:table;" property in css.
So There is two ways to resolve this.
Remove this class
Overwrite css for this class as "display:block"
The thing you are asking its not the right way to do it as i see in your code because you are using bootstrap and bootstrap logic doesnt work like this. If you need your span align whatever you want dont put it inside the div with horizontal-form class and form-group class. In this case if i understood it well to align it right just apply float: right; to the span.