i was trying to place css styled tabs in visual force page

the code for that is

<apex:page >
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
  <apex:includeScript value="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<div class="container">
  <p>The .nav-tabs class is used to create navigation tabs:</p>                  
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">About</a></li>        

 the expected view should be like 

enter image description here

but seems to be the styling was not applied in visual force page it is rendering as
enter image description here

i was wondering how to append this style sheet on line

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

in visual force... i am new to visual force styling things .. happy to hear any modifications on code...

enter image description here


Add all the below script in between your head tags

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet"/>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <!--         jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--         Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!--         datatable---- -->
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

this all will work for your this requirement and also for your further requirements!!!

![enter image description here][1]
| improve this answer | |
  • thank you.. this did really well.. Basically i was using apex:tabpanel but when i include tab panel with data table components the tabs are not functioning .. so i was going with html approach.. If possible have a look to my other related question salesforce.stackexchange.com/q/80900/17012 – rajasekhar Jun 24 '15 at 6:56
  • ya sure!!! if this questions works for you ...you can mark it as answer!!! – Arjun Khatri Jun 24 '15 at 6:57
  • sure .. actually i tried to mark but seems to be the community will need minimum 15 min after asking question to mark a post as answer.. will mark in few minutes when option got enabled.. and thanks for the answer – rajasekhar Jun 24 '15 at 6:59
  • okie!!! no worries we are here to help each other!!! cheerss!! – Arjun Khatri Jun 24 '15 at 7:00
  • every thing is working great but this changes the whole standard layout of the page like i was not able to see salesforce cloud and version logos on left top corner and also all the context got zoomed ... is they any way to come out of this.I have added the pic in question can you have a look at this – rajasekhar Jun 24 '15 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.