Bootstrap 3 Tab CSS Customization

Question

I am new in Bootstrap.

I am creating a Tab using Bootstrap 3.

The code is -

                <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <title>Example of Twitter Bootstrap 3 Tabs Methods</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

            <style type="text/css">
                .bs-example{
                    margin: 20px;
                }
            </style>
            </head>
            <body>
            <div class="bs-example">
                <ul class="nav nav-tabs" id="myTab">
                    <script type="text/javascript">
                        $(document).ready(function()
                        {    //2nd (2-1 = 1) tab selected initialy
                            $("#myTab li:eq(1) a").tab('show');
                        });
                    </script>
                    <li><a data-toggle="tab" href="#sectionA">Section A</a></li>
                    <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
                </ul>
                <div class="tab-content">
                    <div id="sectionA" class="tab-pane fade in active">
                        <h3>Section A</h3>
                        <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                    </div>
                    <div id="sectionB" class="tab-pane fade">
                        <h3>Section B</h3>
                        <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
                    </div>
                </div>
            </div>
            </body>
            </html>

And I am getting a output like this -

.

But I want it's CSS to be customised and looking like this-

.

I don't know how to add those CSS's.

Can anyone please help me?

Thanks in advance for helping.

score 1 · Accepted Answer · edited May 23 '17 at 11:57

A good approach would be to do as Pabluez describes in his answer to a similar question. This will make your life a lot easier when it's time to upgrade to a new Bootstrap version.

Pabluez answer: https://stackoverflow.com/a/8672691/4483028

The best thing to do is.

fork twitter-bootstrap from github and clone locally.

they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.

Do not modify the bootstrap.css file

It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).

Create your own css file and overwrite whenever you want original bootstrap stuff

if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be . If you declare your css file after bootstrap.css, this will overwrite whatever you want to.

Bootstrap 3 Tab CSS Customization

1 Answers1