CODEWITHSUNDEEP
htmlcsstwitter-bootstrapimageborder
sunwarr10r
sunwarr10r

Reputation: 4797

Adding border to bootstrap theme (CSS) doesnt work

I want to add a regular shadow to my img and when I use the following code, everything works fine:

img.img-border {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    box-shadow: 10px 10px 41px -12px rgba(123,129,140,1); }
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <img class="img-border" src="https://placeholdit.co/i/200x150">
    </body>
</html>

But when I do the same within a bootstrap theme, just nothing happens with the img. Does anybody have an idea? This is the bootstrap section code:

<head>
    <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
    <section class="pb16">
        <div class="container">
            <div class="row v-align-children">
                 <div class="col-md-4 col-sm-5 mb-xs-24">
                     <h3 class="large mb40 mb-xs-16">TITLE BLABLA</h3>

                     <p class="lead" style="text-align: justify">Text Content blablabla</p>
                    <a class="btn btn-filled btn-lg mb32 mt-xs-40" href="#">Click Here</a>
                    </div>
                    <div class="col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 text-center" >
            <img class="img-shadow" alt="Screenshot" src="img/picture.png">
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>

This is in custom.css:

  html.body.img.img-shadow {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
  }

Upvotes: 0

Views: 188

Answers (3)

WebDevBooster
WebDevBooster

Reputation: 14964

In order to override Bootstrap css, your custom css must have the same or higher specificity AND your custom css must be loaded after you load Bootstrap css.

In your updated code you posted that you are using this for the css rule:

html.body.img.img-shadow

Change it to this instead: .img-shadow

Upvotes: 1

happymacarts
happymacarts

Reputation: 2604

Load your CSS styles after the bootstrap version and make a custom class and apply that to overcome specificity issues.

read more

.custom {
  -webkit-box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1);
  -moz-box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1);
  box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<div class="well">
the well is proof that the bootstrap is loading
  <img class="img-border custom" src="https://placeholdit.co/i/200x150">
</div>

Upvotes: 1

Aonghas M
Aonghas M

Reputation: 2101

It sounds like your CSS isn't specific enough to overwrite the Bootstrap CSS.

Try adding some of the parent classes/ elements in front of the image tag and see if that works.

e.g.

html body img.img-border {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
     box-shadow: 10px 10px 41px -12px rgba(123,129,140,1); 
}

You could also force the style on with !important at the end but that is bad practice so only use it when absolutely necessary.

Upvotes: 1

Related Questions