CODEWITHSUNDEEP
csstwitter-bootstrap-3stylesheetbootstrap-modal
Natanael
Natanael

Reputation: 2420

How to change css style of a Bootstrap 3 modal?

I cannot change the style of Bootstrap 3 modals.

I tried this in my css file:

.modal .modal-dialog { 
    width: 150px; 
    background-color: blue;
}

But I got no results.

Why it don't works? And how could I change the Bootstrap 3 modal?

Here is may head tag:

 <head>
    <meta http-equiv="Content-Language" content="pt-br">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <!--<meta name="csrf-token" content="">-->

    <title>Home</title>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

    <!-- jQueryUI -->
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  




    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    <!-- Optional theme -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />-->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- React -->
    <script src="js/react/build/react.js"></script>
    <script src="js/react/build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

    <!-- App Styles -->
    <link rel="stylesheet" href="/css/styles.css" />

    <!-- jQueryMask -->
    <script src="js/jquery.mask.js"></script>

  </head>

Update: I can do it via inline style. It's ugly, but works!

Upvotes: 1

Views: 4738

Answers (4)

Hila Grossbard
Hila Grossbard

Reputation: 602

try using ng-deep:

::ng-deep .modal .modal-dialog { 
    width: 150px; 
    background-color: blue;
}

Upvotes: 0

Natanael
Natanael

Reputation: 2420

Wrong:

<link rel="stylesheet" href="/css/styles.css" />

Correct:

<link rel="stylesheet" href="css/styles.css" />

Upvotes: 0

Sators
Sators

Reputation: 3116

Make sure that the classes you are adding are loading after the Bootstrap CSS file...

Upvotes: 1

Alqin
Alqin

Reputation: 1305

.modal .modal-dialog { 
   width: 150px; 
   background-color: blue;
}

You forgot to put px at the end of 150.

Upvotes: 4

Related Questions