I would like to move my button directly upward in a responsive way so that it’s inline with the iOS and Android buttons using Bootstrap
.
My attempt in the code below gives me the output which’s the screenshot provided but isn’t what I want
I’ve tried a lot of things throughout SO and the web but nothing seems to be working. I would add some CSS from the outside but I feel like it wouldn’t be as responsive as it should. I must be overlooking something miniscule.
What am I doing wrong?
import React from 'react';
const footer = () => {
return(
<footer className="container">
<div className="col-md-6 col-sm-12 center">
<img className="iosBtn imgCenter img-responsive" src="https://website.com/images/website/Home/iphone.png?v=6.97"/>
<img className="img-responsive" src="https://website.com/images/website/Home/google_play.png?v=6.97"/>
</div>
{/* I want to move this upward */}
<form className="form-inline float-right">
<div className="form-group mx-sm-3 mb-2">
<input className="form-control" placeholder="Enter Email"/>
</div>
<button type="submit" className="btn btn-primary mb-2">Submit</button>
</form>
<hr/>
<div className="row text-center">
<div className="col-sm">
<a href="#">WINNERS</a>
</div>
<div className="col-sm">
<a href="#">BLOG</a>
</div>
<div className="col-sm">
<a href="#">FAQ</a>
</div>
<div className="col-sm">
<a href="#">SWEEPSTAKES</a>
</div>
<div className="col-sm">
<a href="#">CONTACT US</a>
</div>
<div className="col-sm">
<a href="#">TERMS</a>
</div>
</div>
<br/>
<div className="text-center">
<a href="#" className="btn btn-sm btn-link fa fa-facebook"></a>
<a href="#" className="btn btn-sm btn-link fa fa-instagram"></a>
<a href="#" className="btn btn-sm btn-link fa fa-youtube"></a>
<a href="#" className="btn btn-sm btn-link fa fa-twitter"></a>
<p className="text-center">website</p>
</div>
</footer>
);
};
export default footer;
2
Answers
Judging from your html, the form has the
float: right;
style applied which is causing the weird behavior.I’d recommend using flexbox instead:
Wrap your
div
with the images and yourform
in onediv
. And play withdisplay: inline-block
andfloat: left
on the two. If nothing works, try to wrap theform
also with anotherdiv
and have theinline-block
there.See sample code