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

1 Answer 1


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]
  • 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, 2015 at 6:56
  • ya sure!!! if this questions works for you ...you can mark it as answer!!! Jun 24, 2015 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, 2015 at 6:59
  • okie!!! no worries we are here to help each other!!! cheerss!! Jun 24, 2015 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, 2015 at 7:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .