I have a site in which the header image is not displaying correctly in mobile. I'm using bootstrap 4, so the site should be responsive. But when I load my site in mobile browser the header image repeats. I remove the no-repeate in css, but then the image covers half of the div, the other half is blank. The header works just fine in laptop, and desktop. is just mobile I'm having problem displaying.
here's the site JV Computers
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
learn more
get support
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
Back to top
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS code
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}
this should do it: background-size: cover;
Related
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I want to put the <hr closer to the content in the header.
I try to use position-absolute but the disappears.
This is my first project with bootstrap.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Body -->
<header class="header row">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="col-10 row">
<h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
<div class="col-3 px-0">
<div class="float-end d-flex justify-content-between">
<i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
</a>
<div class="dropdown-menu bg-transparent border-0">
My Profile
Settings
Log Out
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="height:1px;color:#1968B2;">
</header>
<hr style="height:1px;color:#1968B2; margin-top: -4px">
you can adjust the margin top according to your usage
I suggest you do not use the <hr> tag but a new css class or ::after to do that.
<header class="header row hr-bottom">
.hr-bottom {
border-bottom: 1px solid black;
}
OR
.hr-bottom::after {
border-bottom: 1px solid black;
}
The fastest way add class to hr for example bar
<hr class="bar" style="height:1px;color:#1968B2;">
and in CSS add class:
.bar {
transform: translateY(-10px);
}
Values up to you It may take px or procentage
I'm trying to spread the elements across to the corner of the screen. I did try making use of the following code, but it isn't working.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<small class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</small>
</div>
</div>
</footer>
This is how it is apprearing:
I would like to have the Copyright text and Privacy Policy spread across the edges of the screen
<small> is an inline element so it doesn't span the 100% width... try using a block level element like <div> instead. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
You should also make sure width is set to 100% on this element.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<div style="width:100%;" class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</div>
</div>
</div>
</footer>
I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.
I tried these answers for example:
Bootstrap footer not at bottom
Flushing footer to bottom of the page, twitter bootstrap
Height not 100% on Container Fluid even though html and body are
But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.
This is the code for my footer:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:
https://codepen.io/anon/pen/oMZVxq
Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
Link1
</li>
<li class="nav-item">
Link2
</li>
<li class="nav-item">
Link3
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
Forgot Password?
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen updated https://codepen.io/anon/pen/PBpgNN
reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/
If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
First add display: flex; and flex-direction: column; to #page-container.
Now you have "set the stage" for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
See this codepen.
So this helped me - if someone is still looking for an answer:
on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.
Important
One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)
if you are not using the bootstrap, here is the styling .h-100{height:100% !important}
I am quite new to Bootstrap 4. I can't seem to get my 3 buttons centered in the middle of the page. I am using Bootstrap-4. I feel it is something simple I am missing. Also is there a way to extend the buttons a little more outside the text, would I use padding for that? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Sanchez</a>
<!--Toggle Button-->
<button class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"aria-controls="navbarTogglerDemo01" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" a href="Sanchez_Bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="Sanchez_bootstrap_portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="Sanchez_bootstrap_contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="content">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html">Web
Developer</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html">Portfolio</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html">Contact</a>
</<div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
CSS
body{
background-image: url('images/background3.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
html{
height: 100%;
}
#content{
align-items: center;
text-align: center;
}
Please share a screenshot of the web page and the problem to explain it better. Also, there are few points I would like to bring to attention.
Why are you not including jquery.min.js in the head when bootstrap nav depends on it to work? It should be before bootstrap src
You have a typo </<div> please check your code
What do mean by centering the buttons?
You mean centering side by side? like this: or you mean centering as in stacked?
For the former case, I used this code:
<div id="content">
<div class="container text-center" style = "vertical-align:middle;
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" >
<div class="row" style = "line-height: 20em;">
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For the latter, I used:
<div id="content">
<div class="container text-center">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For bootstrap divs, think about dividing divs in to subdivs and then give them elements. For col-lg-12, we have 12 blocks. If you want three inner elements, divide 12 by 3 which is 4. So wrap each of the three elements in col-lg-4. The width would be: 100/3 = 33.33% Similarly, if you want three elements with each 100% wide, wrap the three in each col-lg-12 div and each will have width of 100/1 = 100%
Its better to have a habit of specifying lg, sm, xs and md when you are writing the code itself and use a mobile first development methodology to think how its gonna look on each mobile devices right away. i.e. specify col-lg-12 col-sm-12 col-xs-12 col-md-12 in each div.
Note: I used your code in an ongoing project, so few css have been inherited form my code, like font width, button coloring, background etc