Have you fixed this issue yet? if not, do you have WP_debug() turned on to true? is all your code inside of functions.php, or are you using an inc folder? if you can paste the code you are having issues with, that would be great, also paste the enqueued styles and scripts as well, to see if bootstrap is being enqueued properly.

Side note: do you need the li to have pretty class names, and what made you choose to use bootstrap?

i seen a youtube tutorial in the freelancer bootstrap theme to wordpress. the thing is that the video is a year ols and things have changed. i decided to try it anyway and was able to work around a few issues in the earlier videos but now im stuck. im at the contact section and the words like name contace ect arent floating above and when i inspect it asys .form control {bootstrap.min......} and shows some css that is scratched out.

add_theme_support( 'post-thumbnails' );

function b2w_theme_styles() {

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );

wp_enqueue_style( 'font-awesome_css', get_template_directory_uri() . '/css/font-awesome.min.css' );

wp_enqueue_style( 'font-awesome_css', 'https://fonts.googleapis.com/css?family=Montserrat:400,700' );

wp_enqueue_style( 'font-awesome_css', 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' );

wp_enqueue_style( 'magnific-popup_css', get_template_directory_uri() . '/css/magnific-popup.css' );

wp_enqueue_style( 'freelancer_css', get_template_directory_uri() . '/css/freelancer.min.css' );

} add_action ('wp_enqueue_scripts', 'b2w_theme_styles');

function b2w_theme_js() {

wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), '', true );

wp_enqueue_script( 'magnific_popup_js', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array('jquery'), '', true );

wp_enqueue_script( 'BootstrapValidation_js', get_template_directory_uri() . '/js/jqBootstrapValidation.js', array('jquery'), '', true );

wp_enqueue_script( 'contact_me_js', get_template_directory_uri() . '/js/contact_me.js', array('jquery', 'BootstrapValidation_js'), '', true );

wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/freelancer.min.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'b2w_theme_js' );

?>

<?php get_header(); ?> <!-- Header --> <header class="masthead bg-primary text-white text-center"> <div class="container"> <img class="img-fluid mb-5 d-block mx-auto" src="<?php echo get_template_directory_uri(); ?> /img/genesis.jpg" alt=""> <h1 class="text-uppercase mb-0"><?php bloginfo('name'); ?></h1> <hr class="star-light"> <h2 class="font-weight-light mb-0"><?php bloginfo('description'); ?></h2> </div> </header>

<!-- Portfolio Grid Section --> <section class="portfolio" id="portfolio"> <div class="container"> <h2 class="text-center text-uppercase text-secondary mb-0">Portfolio</h2> <hr class="star-dark mb-5"> <div class="row">

  <?php
      if ( have_posts() ) : while ( have_posts() ) : the_post();
      ?>
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-1">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <?php the_post_thumbnail( 'full', array('class' => 'img-fluid') ); ?>
      <!--<img class="img-fluid" src="img/portfolio/cabin.png" alt="">-->
    </a>
  </div>
<?php endwhile; endif ?>
  <!-- <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-2">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="img/portfolio/cake.png" alt="">
    </a>
  </div>
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-3">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="img/portfolio/circus.png" alt="">
    </a>
  </div>
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-4">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="img/portfolio/game.png" alt="">
    </a>
  </div>
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-5">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="img/portfolio/safe.png" alt="">
    </a>
  </div>
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-6">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fa fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="img/portfolio/submarine.png" alt="">
    </a>
  </div> -->
</div>

</div> </section>

<!-- About Section --> <section class="bg-primary text-white mb-0" id="about"> <div class="container">

<?php
$args = array(
    'page_id' => '26'
);

$wp_query = new WP_Query( $args );

    if ( $wp_query -> have_posts() ) : while ( $wp_query -> have_posts() ) : $wp_query -> the_post();

    ?>
<h2 class="text-center text-uppercase text-white"><?php the_title(); ?></h2>
<hr class="star-light mb-5">
<div class="row">
  <?php the_content(); ?>
  <!--<div class="col-lg-4 ml-auto">
    <p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
  </div>
  <div class="col-lg-4 mr-auto">
    <p class="lead">Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
  </div>
</div>
<div class="text-center mt-4">
  <a class="btn btn-xl btn-outline-light" href="#">
    <i class="fa fa-download mr-2"></i>
    Download Now!
  </a>
</div>-->

<?php endwhile; endif; ?> </div> </section>

<!-- Contact Section --> <section id="contact"> <div class="container"> <h2 class="text-center text-uppercase text-secondary mb-0">Contact Me</h2> <hr class="star-dark mb-5"> <div class="row"> <div class="col-lg-8 mx-auto"> <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. --> <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. --> <?php echo do_shortcode( '[contact-form-7 id="34" title="Contact form 1"]' ); ?> <!--<form name="sentMessage" id="contactForm" novalidate="novalidate"> --> <!-- <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Name</label> <input class="form-control" id="name" type="text" placeholder="Name" required="required" data-validation-required-message="Please enter your name."> <p class="help-block text-danger"></p> </div> </div> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Email Address</label> <input class="form-control" id="email" type="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address."> <p class="help-block text-danger"></p> </div> </div> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Phone Number</label> <input class="form-control" id="phone" type="tel" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number."> <p class="help-block text-danger"></p> </div> </div> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Message</label> <textarea class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea> <p class="help-block text-danger"></p> </div> </div> <br> <div id="success"></div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Send</button> </div> </form>--> </div> </div> </div> </section>

<?php get_footer(); ?>

<!DOCTYPE html> <html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">


<!-- Bootstrap core CSS -->

<?php wp_head(); ?>

<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

<!-- Plugin CSS -->
<!--<link href="/vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">-->

<!-- Custom styles for this template
<link href="/css/freelancer.min.css" rel="stylesheet">-->

</head>

<body id="page-top">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Genesis&Company</a>
    <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<footer class="footer text-center"> <div class="container"> <div class="row"> <div class="col-md-4 mb-5 mb-lg-0"> <h4 class="text-uppercase mb-4">Location</h4> <p class="lead mb-0">1234 address here <br>Sacramento, Ca 95823</p> </div> <div class="col-md-4 mb-5 mb-lg-0"> <h4 class="text-uppercase mb-4">Follow me here</h4> <ul class="list-inline mb-0"> <li class="list-inline-item"> <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#"> <i class="fa fa-fw fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#"> <i class="fa fa-fw fa-google-plus"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#"> <i class="fa fa-fw fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#"> <i class="fa fa-fw fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#"> <i class="fa fa-fw fa-dribbble"></i> </a> </li> </ul> </div> <div class="col-md-4"> <h4 class="text-uppercase mb-4">About Gen&Co</h4> <p class="lead mb-0">add info here <!--<a href="http://startbootstrap.com">Start Bootstrap</a>.--></p> </div> </div> </div> </footer>

<?php wp_footer(); ?>

<!-- Bootstrap core JavaScript <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

   Plugin JavaScript
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

    Contact Form JavaScript
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>

    Custom scripts for this template
<script src="js/freelancer.min.js"></script>-->

</body>

</html>

body { font-family: 'Lato'; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: 'Montserrat'; }

hr.star-light, hr.star-dark { max-width: 15rem; padding: 0; text-align: center; border: none; border-top: solid 0.25rem; margin-top: 2.5rem; margin-bottom: 2.5rem; }

hr.star-light:after, hr.star-dark:after { position: relative; top: -.8em; display: inline-block; padding: 0 0.25em; content: '\f005'; font-family: FontAwesome; font-size: 2em; }

hr.star-light { border-color: #fff; }

hr.star-light:after { color: #fff; background-color: #18BC9C; }

hr.star-dark { border-color: #2C3E50; }

hr.star-dark:after { color: #2C3E50; background-color: white; }

section { padding: 6rem 0; }

section h2 { font-size: 2.25rem; line-height: 2rem; }

@media (min-width: 992px) { section h2 { font-size: 3rem; line-height: 2.5rem; } }

.btn-xl { padding: 1rem 1.75rem; font-size: 1.25rem; }

.btn-social { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; line-height: 2rem; }

.scroll-to-top { z-index: 1042; right: 1rem; bottom: 1rem; display: none; }

.scroll-to-top a { width: 3.5rem; height: 3.5rem; background-color: rgba(33, 37, 41, 0.5); line-height: 3.1rem; }

mainNav {

padding-top: 1rem; padding-bottom: 1rem; font-weight: 700; font-family: 'Montserrat'; }

mainNav .navbar-brand {

color: #fff; }

mainNav .navbar-nav {

margin-top: 1rem; letter-spacing: 0.0625rem; }

mainNav .navbar-nav li.nav-item a.nav-link {

color: #fff; }

mainNav .navbar-nav li.nav-item a.nav-link:hover {

color: #18BC9C; }

mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {

color: #fff; }

mainNav .navbar-nav li.nav-item a.nav-link.active {

color: #18BC9C; }

mainNav .navbar-toggler {

font-size: 80%; padding: 0.8rem; }

@media (min-width: 992px) { #mainNav { padding-top: 1.5rem; padding-bottom: 1.5rem; -webkit-transition: padding-top 0.3s, padding-bottom 0.3s; -moz-transition: padding-top 0.3s, padding-bottom 0.3s; transition: padding-top 0.3s, padding-bottom 0.3s; } #mainNav .navbar-brand { font-size: 2em; -webkit-transition: font-size 0.3s; -moz-transition: font-size 0.3s; transition: font-size 0.3s; } #mainNav .navbar-nav { margin-top: 0; } #mainNav .navbar-nav > li.nav-item > a.nav-link.active { color: #fff; background: #18BC9C; } #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover { color: #fff; background: #18BC9C; } #mainNav.navbar-shrink { padding-top: 0.5rem; padding-bottom: 0.5rem; } #mainNav.navbar-shrink .navbar-brand { font-size: 1.5em; } }

header.masthead { padding-top: calc(6rem + 72px); padding-bottom: 6rem; }

header.masthead h1 { font-size: 3rem; line-height: 3rem; }

header.masthead h2 { font-size: 1.3rem; font-family: 'Lato'; }

@media (min-width: 992px) { header.masthead { padding-top: calc(6rem + 106px); padding-bottom: 6rem; } header.masthead h1 { font-size: 4.75em; line-height: 4rem; } header.masthead h2 { font-size: 1.75em; } }

.portfolio { margin-bottom: -15px; }

.portfolio .portfolio-item { position: relative; display: block; max-width: 25rem; margin-bottom: 15px; }

.portfolio .portfolio-item .portfolio-item-caption { -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; opacity: 0; background-color: rgba(24, 188, 156, 0.9); }

.portfolio .portfolio-item .portfolio-item-caption:hover { opacity: 1; }

.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content { font-size: 1.5rem; }

@media (min-width: 576px) { .portfolio { margin-bottom: -30px; } .portfolio .portfolio-item { margin-bottom: 30px; } }

.portfolio-modal .portfolio-modal-dialog { padding: 3rem 1rem; min-height: calc(100vh - 2rem); margin: 1rem calc(1rem - 8px); position: relative; z-index: 2; -moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); }

.portfolio-modal .portfolio-modal-dialog .close-button { position: absolute; top: 2rem; right: 2rem; }

.portfolio-modal .portfolio-modal-dialog .close-button i { line-height: 38px; }

.portfolio-modal .portfolio-modal-dialog h2 { font-size: 2rem; }

@media (min-width: 768px) { .portfolio-modal .portfolio-modal-dialog { min-height: 100vh; padding: 5rem; margin: 3rem calc(3rem - 8px); } .portfolio-modal .portfolio-modal-dialog h2 { font-size: 3rem; } }

.floating-label-form-group { position: relative; border-bottom: 1px solid #e9ecef; }

.floating-label-form-group input, .floating-label-form-group textarea { font-size: 1.5em; position: relative; z-index: 1; padding-right: 0; padding-left: 0; resize: none; border: none; border-radius: 0; background: none; box-shadow: none !important; }

.floating-label-form-group label { font-size: 0.85em; line-height: 1.764705882em; position: relative; z-index: 0; top: 2em; display: block; margin: 0; -webkit-transition: top 0.3s ease, opacity 0.3s ease; -moz-transition: top 0.3s ease, opacity 0.3s ease; -ms-transition: top 0.3s ease, opacity 0.3s ease; transition: top 0.3s ease, opacity 0.3s ease; vertical-align: middle; vertical-align: baseline; opacity: 0; }

.floating-label-form-group:not(:first-child) { padding-left: 14px; border-left: 1px solid #e9ecef; }

.floating-label-form-group-with-value label { top: 0; opacity: 1; }

.floating-label-form-group-with-focus label { color: #18BC9C; }

form .row:first-child .floating-label-form-group { border-top: 1px solid #e9ecef; }

.footer { padding-top: 5rem; padding-bottom: 5rem; background-color: #2C3E50; color: #fff; }

.copyright { background-color: #1a252f; }

a { color: #18BC9C; }

a:focus, a:hover, a:active { color: #128f76; }

.btn { border-width: 2px; }

.bg-primary { background-color: #18BC9C !important; }

.bg-secondary { background-color: #2C3E50 !important; }

.text-primary { color: #18BC9C !important; }

.text-secondary { color: #2C3E50 !important; }

.btn-primary { background-color: #18BC9C; border-color: #18BC9C; }

.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #128f76; border-color: #128f76; }

.btn-secondary { background-color: #2C3E50; border-color: #2C3E50; }

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: #1a252f; border-color: #1a252f; }

If you are getting 404 errors on scripts or style tags I would suggest first using the dev tools of your browser and check using the network tab to see if the script is loading. If it is not loading then you need to take a look where you are enqueuing your files, and see if the path is correct. This is the most basic an common mistake when files are not being loaded.

can i share my files with you? i dont quite know how to yet on github but can probably watch a youtube video to find out

i added my files to my github @grizzlycali if you have time to take a look

i dont see console errors but when i type in the contact section the "Name" doesnt float above like the origional freelancer template page/site and i see errors wneh i inspect the element. is shows lines through the css and the tag at the top of it is for freelancer.min.css and bootstrap.min.css .

lol i got ya on the css. and yes im using chrome but i dont see a triangle any where, just a line through the css. could it be that im calling in the functions for the style in my css folder called freelancer.css (/css/freelancer.css) that actually holds my css and in my project folder i have a style.css file (/style.css) that only holds my comment for wordpress? should i just combine the wp comment with the css code in one file?

i put everything under the /style.css and got rid of the freelancer css file and changed the call in functions. it still shows the same thing, ya ill go read up on it and see if i can find out more

i accidentaly uploaded it twice but i am using just one

so i decided to use the bootstrap bundle cdn and that took care of some stuff. still no console issues but contact element issues still. question on maybe why... the freelancer.min.css ends with version # 4.9.5:1 could it be i need to add version numbers to something else to match? i was under the impression newer can take care of older but not vice versa.

where i pulled it from btw https://startbootstrap.com/template-overviews/freelancer/

as i belive i mentioned before i am a newbie and my treehouse points are nowhere near yours. that said i know at my level it may be a little over my head to try but i am trying because i am determine to learn this and take on projects that challenge me. i am no longer cutting meat as of 2 months now due to work injury lawsuit bs lol. so i am currently unemployed and need to get enough down to where i can start picking up work or even better, get a position as a developer in a company. there is another theme im trying to convert and having some troubles along the way too but will keep at it. its a multi page theme for a magazine.

thank you Jacob for all your comments and help too man!!!

wish there was a way to add a screenshot or a video clip or even video chat on here lol

will do and thank you

awesome advice and thank you i will keep pushing forward on all of those!! and ive done a portfolio build with html and css at codecademy before and that's why i haven't done it on here but it wouldn't hurt to review again. ive also followed along and learned from youtube videos when it comes to php and aslo the same with javascript but i like how treehouse presents in one orderly fashion and will keep on those courses here as well.

awesome man thanks again!