Center bootstrap button in xs - html

Question

I have spent literally hours on this, I cannot get this button centered when the screen width entered xs mode, it started to position itself based off of the left side. I've tried looking in the bootstrap and cant find any clear indication as to why this happens.
Here is my code, mainly the third main div block with btn-posit class inside and the media queries 461-767px. Thanks
https://codepen.io/fullmetal7777/pen/RgKagp
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 text-center btn-posit">
<button class="btn btn-primary twit-btn"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"><span id="twit-Text">Tweet it</span></i></button>
<button class="btn btn-default quote-btn"><div id="whole-text">Get Quote</div></button>
</div>
</div>

Answer 1

This will get you close to what you want.
The issues:
The column with the buttons in had a class of col-xs-10 which should be col-xs-12 if you want the buttons to be centered.
The twitter button still had margin right on it for the xs size, which was pushing it to the left, preventing it from centering.
https://codepen.io/anon/pen/xrdPVb

Answer 2

If you just want the menus centered, you don't need to use the col-* classes to wrap them. Remove those and apply .text-center (which you already have), then remove all of the media queries you were using to offset the margin and try to center that column. But then I think you have some display issues from using transform: translateX(-1); so I just reversed the image and removed that transform line. The less work the browser has to do, the better, so if you can change the image, I'd just do that.
$(document).ready(function(){
var quotes = {
Mario: ["So long-a-Bowser!", "Nighty nighty. Ah spaghetti. Ah, ravioli. Ahh, mama mia.", "You know what they say: all toasters toast toast."],
Luigi: ["Let's-a go...", "Oh yeah! Who's number one now?! Luigi!", "Now, THIS is where the real action is"],
Bowser: ["Im HUUUUGE! Even scarier up close, huh?", "GAH HA HA HA! There's no WAY you're ready for a round against ME. Keep practicing, pip-squeak!"],
Peach: ['Oh, did I win?', "Go Peachy, Go Peachy, Go Peachy! Yay! Woohoo!"],
Yoshi: ['Yoshi!'],
Fox: ["This is Fox, returning to base!", "Better luck next time, Falco!"],
Falcon: ["Falcon Kick!", 'Blue Falcon!', 'Show me your moves!'],
Marth: ["Konkaiwa bokuno kachidane! (It's my victory this time!)", "Kyoumo ikinobiru kotoga dekita. (Even today I was able to survive.)",
"Bokuwa makeru wake niwa ikenainda! (There's no way I can lose!)"],
Pit: ["Three Sacred Treasures!", "It's game over for you!", "That all you got?"],
Link: ["....."],
Ike: ["Great... AETHER!", "I fight for my friends.", "You'll get no sympathy from me."],
Lucario: ["Behold, the power of Aura!", "The Aura is with me!", "Max Aura!"],
'Wii Fit Trainer': ["High energy, move that body!", "Salute the sun!", "Work hard to tone that tummy."],
Sheik: ['I\'ve been waiting for you, Hero of Time...', 'The flow of time is always cruel.'],
Ganandorf: ['Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.', 'Behold! The power of the Demon King!',
'I am Ganondorf, the Demon King. Don\'t take that title lightly.'],
Mac: ["Let 'em have it, Mac!", "Way to go, Mac! You're the champ, baby!", "Nice moves, Mac. I can barely keep my eyes on you, son."],
Palutena: ["You shall be purified.", "No one can hide from the light.", "Celestial Fireworks!"],
Robin: ["The key to victory lies within.", "I'm always three steps ahead.", "It seems our fates are joined."],
Shulk: ["Now it's Shulk time!", "I can change the future!", "The future is ours to decide!"],
Sonic: ["That was almost too easy!", "Let's do that again some time!"],
Falco: ["Personally, I prefer the air!", "You aren't worth the trouble."],
Wario: ["Wa-Wa-Wa!", "Time for victory parade."],
'Toon Link': ["....."],
Lucina: ["The future is not written!", "Time to change fate!"]
}
var nameArr = ['Mario', 'Luigi', 'Bowser', 'Peach', 'Yoshi', 'Lucina', 'bowser jr', 'Wario', 'game and watch', 'donkeyk', 'diddyk', 'Link', 'Zelda',
'Sheik', 'Ganandorf', 'Toon Link', 'samus', 'zero suite samus', 'Pit', 'Palutena', 'Marth', 'Ike', 'Robin', 'kirby', 'king deedeedee', 'meta knight',
'Mac', 'placeholder', 'Fox', 'Falco', 'pikachu', 'charizard', 'Lucario', 'jigglypuff', 'Greninja', 'duck hunt', 'Rob', 'ness', 'Falcon', 'villager',
'olimar', 'Wii Fit Trainer', 'dr mario', 'dark pit', 'Lucina', 'Shulk', 'pacman', 'Megaman', 'Sonic'];
var imgurID = '0RQtP';
var key = "cfb3f86a62ab07c";
function randomFxn(){
$.ajax({
type: 'GET',
url: 'https://api.imgur.com/3/album/' + imgurID + '/images',
headers: {'Authorization': 'Client-ID '+ key},
}).done(function(data) {
showZones(data)
});
}
var lastNum = '70';
function showZones(jsonData){
var name = '';
do{
var nameNum = Math.floor(Math.random()*(Object.keys(quotes).length));
// var nameNum = 70;
console.log(nameNum);
} while (nameNum == lastNum)
console.log(lastNum);
lastNum = nameNum;
console.log(lastNum);
name = Object.keys(quotes)[nameNum];
var quoteArrLength = quotes[name].length;
var randQuoteNum = Math.floor(Math.random()*quoteArrLength)
var randQuote = '\"' + quotes[name][randQuoteNum] + '\"';
var indexMult = (nameArr.indexOf(name)*8);
var addToIndex = Math.floor(Math.random()*8);
var url = jsonData.data[(indexMult)+addToIndex].link;
var imgCss = 'url(' + url + ')';
var isReverse = Math.floor(Math.random()*2);
$('h3').text('-' + name);
$('h2').text('Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.');
$('.bg').fadeOut(500, function() {
if(isReverse==1){
$(this).css({'background-image': imgCss, 'transform': 'scaleX(1)'}).fadeIn(700);
}
else{
$(this).css({'background-image': imgCss, 'transform': 'scaleX(-1)'}).fadeIn(700);
}
});
}
var num = 0;
$('.quote-btn').click(function(){
if (num == 0){
num++;
randomFxn();
setTimeout(function(){
num = 0;
}, 1200);
}
});
});
body, html{
height: 100%;
}
.bg,
.quote-btn {
background-repeat: no-repeat;
background-size: cover;
}
.bg{
background-image: url("http://i.imgur.com/sxwO4y3.jpg");
height: 100%;
background-size: 70% 100%;
}
.jumbotron{
margin-left: 16.66666667%;
margin-top: -78vh;
background-color: rgba(100, 100, 100, 0.4);
border-style: solid;
border-color: rgba(0, 0, 0, 0);
}
h2, h3{
color: white;
opacity: 1;
font-weight: 900;
}
h2{
margin-top: -3vh;
margin-left: -1.7vw;
}
h3{
float: right;
}
.quote-btn {
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
background-position: 50% 60%;
height: 45px;
width: 140px;
}
.twit-btn{
height: 45px;
width: 140px;
margin-right: 35px;
}
#whole-text{
font-weight: 800;
color: #BC1818;
font-size: 22px;
}
.btn.quote-btn:focus,
.btn.quote-btn:active:focus,
.btn.quote-btn.active:focus,
.btn.quote-btn.focus,
.btn.quote-btn:active.focus,
.btn.quote-btn.active.focus,
.btn.twit-btn:focus,
.btn.twit-btn:active:focus,
.btn.twit-btn.active:focus,
.btn.twit-btn.focus,
.btn.twit-btn:active.focus,
.btn.twit-btn.active.focus{
outline-color: none;
outline-style: none;
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
}
.btn.quote-btn:hover{
border-style: none;
}
.btn.quote-btn:active{
background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
opacity: .8;
}
#media only screen and (max-height: 568px){
.jumbotron{
margin-top:-89vh;
}
}
#media only screen and (min-height: 569px){
.jumbotron{
margin-top:-80vh;
}
.btn-posit {
margin-top: -42vh;
}
}
#media only screen and (min-width: 0px) and (max-width: 1199px){
.bg{
background-size: cover;
background-position: center;
}
}
/*medium*/
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.jumbotron{
margin-left: 8.33333333%;
}
}
/*small*/
#media only screen and (min-width: 768px) and (max-width: 991px){
.jumbotron{
margin-left: 4.15%;
}
}
/*xs*/
#media only screen and (min-width: 461px) and (max-width: 767px){
.jumbotron{
margin-left: 8.33333333%;
}
.btn-posit{
width: auto;
}
}
#media only screen and (min-width: 0px) and (max-width: 460px) {
h2{
font-size: 22px;
}
h3{
font-size: 18px;
}
.btn-posit{
/*padding-left: 78px; */
margin-left: 1%;
}
.jumbotron{
margin-left: 8%;
}
.twit-btn{
margin-right: 55px;
width: auto;
}
#twit-text{
display: none;
}
}
/*#media only screen and (min-width: 0px) and (max-width: 422px) {
h2{
font-size: 22px;
}
h3{
font-size: 18px;
}
.twit-btn{
width: auto;
margin-right: 10px;
}
.btn-posit{
padding-left: 15%;
}
#twit-text{
display: none;
}
}*/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/5ad62430a6.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>AwesomeDesigns Random Quote Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="bg"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 col-sm-11 col-xs-10 jumbotron">
<h2>"Andrews Random Quote Generator. "</h2>
<h3>-Andrew Hickman</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="text-center btn-posit">
<button class="btn btn-primary twit-btn"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"><span id="twit-Text">Tweet it</span></i></button>
<button class="btn btn-default quote-btn"><div id="whole-text">Get Quote</div></button>
</div>
</div>
</div>
</html>

Answer 3

adding text-center class seemed to be the fix!