[SalesForce] Bootstrap NavBar in Lightning for Communities

I have created a lightning component to house a very standard Bootstrap Navbar. We are also using the Koa template. I have tested the navbar and everyhting looks great in the dev console preview and even in Community Builder. But when I publish the site with the new Nav Bar component it loses all of its styling. Anyone have any ideas why this would happen? I am using the correct lightning require tags, like I said everything looks great until publication.

Best Answer

Take a look at loading external js and CSS in lightning:

https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

Updated component code:

   <aura:component implements="forceCommunity:availableForAllPageTypes">
<ltng:require styles="/resource/bootstrapcss" scripts="/resource/bootstrapjqueryjs,/resource/BootStrap"/>    
<div class="prao">
    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

    </div> <!-- /container -->
</div>
</aura:component>

The styling in community is still a little off, the app.css is changing font style and bold attributes. I have no issues getting the file, one thing I found was the tool does not take the min version, I provided https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css and was able to generate the CSS, when i provided the min version I get the application error too

Step 1 : I took the bootstrap css provided it to the namespace generator tool

https://bootstrap-namespacer.herokuapp.com/

Step 2: loaded the resulting css back into static resource.

Step 3: Wrapped my container div with another div where class="mycustomnamespace i provided for my css"

Bootstrap preview: https://getbootstrap.com/examples/navbar/ My community preview:

Related Solutions

[SalesForce] How to Style a Lightning Component with Bootstrap Styling

I will recommend not to style it with bootstrap instead use lightning design system. So, that your component looks consistent with rest of the app. However, if you wan to use bootstrap use

<ltng:require styles="{!$Resource.resourceName}" />

or if you want to use multiple file then

styles="{!join(',', 
    $Resource.myStyles + '/stylesheetOne.css', 
    $Resource.myStyles + '/moreStyles.css')}"

Please refer to following article for more information.

[SalesForce] Lightning, css and communities

You'll have to use increased CSS Specificity in how you write your style sheet. While you can dive deep into specificity by looking into a specificity chart, the short explanation is that you'll need more selectors to identify things and then you won't need to use !important. For example, instead of this:

.myStyle { 
    background-color: #eee; 
}

do this:

#containerName .classInsideCont div .myStyle {        
    background-color: #eee; 
}

The second example has more CSS selectors and therefor overrides the first.

This image below from the style sheet in the inspector of a community page shows that this element has 4 selectors on it. You would therefore need to either use a specificity from the chart above that overrides this or the shorthand is to just use more selectors (i.e. 5) than this to override it.

Best Answer

Related Solutions

[SalesForce] How to Style a Lightning Component with Bootstrap Styling

[SalesForce] Lightning, css and communities

Related Topic