I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this?
As far as I know, col-md-6
should divide the page into 2 columns, and col-xs-12
should stack them vertically on mobile, but it's not working that way for me. Am I unknowingly overriding the default bootstrap css?
https://i.sstatic.net/kSAYZ.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
<a href="#" class="" role="button" target="_blank">github</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="#" class="" role="button" target="_blank">linkedin</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="3" class="" role="button" target="_blank">twitter</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="/blog" class="" role="button" target="_blank">blog</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
</div>
</div>
</div>
</div>
</body>
</html>