Remove shadow-box and adjust container size

Asked

Viewed 151 times

1

I’m having a hard time making some adjustments on a page

I’m using Bootstrap3, and I can only make settings on Clientside

I’d like to remove the box shadow from a jumotron.btn

box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)

and vary the size of the container of 70% for 40%

in which file should I make these changes? no CSS pattern did not find.

when I open the console I find this link, 

http://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css

I’m new to this part of the Web, if you can shed some light.

css html5 bootstrap-3
  • 1

    You can make your own css to overwrite these properties, so you don’t touch the original files and can better understand what is being/or not being changed.

  • I tried to use some ! Mportant but unsuccessfully

  • 1

    You need to see the entire file hierarchy. In some define only .container {} it won’t help if he has a deeper hierarchy, ex: .section .row .container {} and !important also not the best way out. Another thing that can interfere is the file load. If I’m not missing the memory, your css should be loaded after bootstrap css, so you can overwrite the files.

  • I was able to remove the shadow, but the width problem I still can’t change, I believe it’s the same idea.

  • Probably. Try searching for the src file equivalent to the css you are loading, it will be easier to identify. Because what’s in load is the .min.css that’s harder to maintain.

  • You tried to look in expanded file?

  • Guilhermelima do as @Celsomtrindade said, overlap with a separate CSS (for example, declared after Bootstrap.). The important thing is that yours be as specific as possible for your instruction to override the original. The !important is usually a resource to use in more extreme cases. The browser inspector usually shows the entire CSS hierarchy, use it to determine where to move.

Show 2 more comments

1 answer

1


Create a new . css file and make the changes there, always putting ! Important So what to do when wearing bootstrap

In the new created file, put this:

.jumbotron .btn{
 box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0) !important;   
}

  • Thanks Dad, I’ve done it before but it’s okay for those who need it

  • Glad I made it.

Browser other questions tagged css html5 bootstrap-3

You are not signed in. Login or sign up in order to post.