Bootstrap css causes modals not to load

Here follows this code:

<ion-view title="Path">
   <link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet">
   <ion-nav-buttons side = "Left">
  <a class="button button-clear" href="#/app/paths"> <i class="icon ion-ios7-arrow-back"></i> Back</a>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <div class="list card">
 <div class="item">
     <// Some Code to display my Path //>
 </div>

 <div class="item tabs tabs-secondary tabs-icon-left">

    <a class="tab-item" href="#/app/paths/{{path.pathid}}/comments">
      <i class="icon ion-chatbox"></i>
       View Comments
    </a>
   <a class="tab-item" ng-click="open()">
      <i class="icon ion-plus"></i>
      Add Comment
   </a>


 </div>

 </div>
</ion-content>

the line

<link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet">

stops the modal from appearing.

I cannot use the CSS in the index.html as it messes up the entire display of my app.
How to solve this issue?

2 Likes

Where you able to fix this? I’m also facing the same issue.

You can solve this issue by using a custom version of ui-bootstrap that doesn’t define modals. In fact, since ui-bootstrap defines modals as well it creates conflicts with ionic modals.

Found Solution (worked for me):

Copy all modal classes from ionic.css from line no. 3784 - 3884 of Ionic, v1.0.0-beta.13 into a new css lets say “modal.css” and import it after bootstrap.css.
All the conflicts are overridden by custom css.

Import Hierarchy:

  1. ionic.css
  2. bootstrap.css
  3. modal.css
1 Like

Or you can just import bootstrap before ionic css. Worked for me. But I don’t know if this causes any other problems. Is there a reason to split the css and use another modal.css file?

1 Like

absolutely no reason to split , only thing this approach does is that it will give you more control over customization of modal window with or without same import hierarchy.

I always find it easy to change, as app goes from POC to final design, constant changes and crazy deadlines does become headache if you are not on top of your code and doesn’t know where to fix it.