I am using Bootstrap 4.0.0 alpha 6: I don't understand why when the width of my progressbars are set to 0, that I still see some of the progress bar. How can I still show the text but not the bar if it is 0?
.resume {
width: 816px;
margin: 48px 48px 48px 48px;
font-size: 13px;
line-height: 16px;
}
.header {
text-align: center;
line-height: 4px;
}
.header hr {
margin: 5px;
}
.name {
text-transform: uppercase;
font-size: 32px;
}
.contact p {
margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
margin-top: 15px;
margin-bottom: 15px;
}
.skills {
line-height: 13px;
}
.skills p {
margin: 8px 8px 8px 8px;
}
.progress {
background-color: #BCBEBF;
text-align: left;
position: relative;
height: 13px;
margin: 8px 8px 8px 8px;
}
.progress-bar {
background-color: #323232;
text-align: left;
line-height: 13px;
padding: 1px 10px 2px;
}
.progress-bar span {
padding: 1px 10px 2px;
position: absolute;
z-index: 2;
color: white;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
}
.employer {
font-size: 16px;
font-weight: bold;
}
.position {
text-decoration: underline;
}
.description {
width: 95%;
margin-left: 12px;
}
.results {
font-weight: bold;
}
.titles {
text-decoration: underline;
}<script src="https://use.fontawesome.com/55fed2cea8.js"></script>
<html>
<title>Home | Resume</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="resume">
<div class="row">
<div class="col-lg-12">
<div class="header">
<h1 class="name">Troy Andrew Pilewski</h1>
<hr />
<div class="contact">
</div>
<hr />
<hr />
</div>
<div class="summary">
<h2>Computer Information Systems Manager</h2>
<ul class="fa-ul">
<li><i class="fa-li fa fa-square"></i><b>Current US Government Top Secret Clearence</b></li>
<li><i class="fa-li fa fa-square"></i><b>Extensive background in Information Systems management, operations and applications, </b>including advanced experience in Microsoft Operating Systems, Microsoft Server Applications, Microsoft Client Applications, VMWare Infrastructure and Maintenance, Cisco Network Devices, Intrusion Detection and Prevention, Local Area Network (LAN) and Wide Area Network (WAN), Microsoft Office Applications</li>
<li><i class="fa-li fa fa-square"></i><b>Advanced Software, Website and Database Development with specific languages and applications;</b> Microsoft Visual Basic .NET, Microsoft Visual Basic for Applications (VBA), Microsoft Access, Microsoft Office SharePoint Services (MOSS), Java</li>
<li><i class="fa-li fa fa-square"></i><b>Demonstrated Success in Information Systems,</b> planned Domain Infrastructure Networks and Documented company policies and procedures</li>
<li><i class="fa-li fa fa-square"></i><b>Successful Manager of teams of 10 to 150,</b> Documented personnel reviews, counseled team members and mentored their well-being</li>
<li><i class="fa-li fa fa-square"></i><b>Industry Standard Certified Professional</b>, possessing certifications in Security+ (2009) and A+ (2011) from CompTIA; and a certification as a Sandler Sales Professional (2014)</li>
</ul>
</div>
<div class="skills">
<h2>Possesses Advance Knowledge Of</h2>
<div class="row">
<div id="col1" class="col-lg-4">
<p>Microsoft Operating Systems</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Office SharePoint Services</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>7 Years</span>
</div>
</div>
<p>Microsoft Active Directory</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Exchange Services</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Office Suite</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Cisco Networking Devices</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>VMWare Products</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>9 Years</span>
</div>
</div>
</div>
<div id="col2" class="col-lg-4">
<p>Project Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>5 Years</span>
</div>
</div>
<p>Personnel Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>9 Years</span>
</div>
</div>
<p>Training and Development</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>9 Years</span>
</div>
</div>
<p>Customer Service Relations</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>8 Years</span>
</div>
</div>
<p>Performance Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>9 Years</span>
</div>
</div>
<p>Oral Expressive</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Critical Thinker</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
</div>
<div id="col3" class="col-lg-4">
<p>Complex Problem Solver</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Attention to Detail</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>13 Years</span>
</div>
</div>
<p>Sandler Sales Concepts</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>3 Years</span>
</div>
</div>
<p>Visual Basic for Applications</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>9 Years</span>
</div>
</div>
<p>Java Application Development</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>1 Years</span>
</div>
</div>
<p>Microsoft Visual Studio</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>11 Years</span>
</div>
</div>
<p>Microsoft SharePoint Designer</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:0%">
<span>5 Years</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<html>It's because although the width is 0, the padding is still greater than 0. Add padding: 0; in addition to your width 0