How to put only a bottom border using bootstrap.(Portfolio Project)

How to put only a bottom border using bootstrap.(Portfolio Project)
0

#1

I’m trying to add the horizontal line that’s between the paragraph and span elements in the project example. I tried copying the example but it wouldn’t work. It looks like he used , it didn’t help, however. Any help would be fantastic and might earn you some Karma points.


#2

Example page: https://codepen.io/freeCodeCamp/full/YqLyXB
Mine: https://codepen.io/kyleshamblin/project/full/XrVOwv/

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My Portfolio Site</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>                                                               
<body style="background-color: #581845;">  
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 bg-primary sticky-top">
      <div class="mx-auto col-md-9 navbar bg-primary">
        <a class="nav-item mr-auto" href="#top"><img src="http://householdairfresheners.com/wp-content/forum/uploads/2017/02/Fancy-Png-Logo-Design-91-On-professional-logo-design-with-Png-Logo-Design.jpg" style="max-height:5em"></a>  
        <a class="nav-item nav-link text-white" href="#about">About</a>
        <a class="nav-item nav-link text-white" href="#portfolio">Portfolio</a>
        <a class="nav-item nav-link text-white" href="#contact">Contact</a>
      </div>
    </div>
  </div>  
  <div class="container bg-secondary rounded p-5 mt-5" id="about">
      <div class="row"                                         
      <div class="intro-text m-auto p-auto col-xs-8">    
        <p class="text-center m-auto lead">Musician, creator, and student of web development. My hope is to help bridge the technological gap for authors, artists, and other creative beings to bring awareness to their work.</p>                                                 
      </div> 
    </div>
  </div>                                              
</div>                    
</body>
</html>

Open to all suggestions, even those unrelated to the specific question!


#3

Hi, friend @kyleshamblin. You can use the <hr> tag between span and paragraph.