1

Example: I have following HTML code and where should I place that bootstrap.min.css link. If I place that link in HTML code itself, when the page is published it's not loading the CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>
</body>
</html>
1
  • If this is not working for you then as an alternate download this css file and place it in your_theme - > css -> bootstrap.min.css. After placing it inside css folder of your theme directory, call it like this from your header.php <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/css/bootstrap.min.css">. See if that helps.
    – Rishabh
    Dec 30, 2016 at 9:50

3 Answers 3

1

Use wp_enqueue_style() in your functions.php:

function custom_wp_enqueue_style() {
wp_enqueue_style( 'bootstrapcdn', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" );
}
add_action ( 'wp_enqueue_scripts', 'custom_wp_enqueue_style' );

The second parameter can be the path to the folder in your server where you have your bootstrap.

6
  • I have tried this & still css is not loading properly. I have placed my html code & custom_wp_enqueue_style code in gist, please tell me what i'm missing . (I'm placeing html code in my wordpress page) (gist.github.com/anonymous/a2055361501a954c04ac976db0044719)
    – kiran
    Dec 30, 2016 at 9:23
  • It works fine for me...
    – dgarceran
    Dec 30, 2016 at 9:39
  • Maybe are you using a cache plugin on your wp or your server? And you wrote "function.php" on the gist. It should be "functions.php", I assume it's a typo, but check if the name is okay, please.
    – dgarceran
    Dec 30, 2016 at 9:42
  • Thank you..:) I have installed wordpress in my local system & checking. Yes its functions.php not function.php
    – kiran
    Dec 30, 2016 at 9:55
  • If I add link in custom_wp_enqueue_style function then is it required to add link in my html file ?
    – kiran
    Dec 30, 2016 at 9:57
0

If you want to load css then you have to simply add single php line before css link. Call this line before href and src link.

<?php echo esc_url( get_template_directory_uri() ); ?>/

using this line you can load all type of css and image also. here you are trying to link bootstrap example:-

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

now your css will work.

4
0

If other methods don't work, you can always use @import inside another css file:

@import url("stylesheet_2.css");

This will work, but may not be as fast since it is waiting for the other css to load before loading the rest of the css.

Sometimes there's no other choice, in case it's a website that you have limited access to, or complicated setup, etc.

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .