How to override Bootstrap's css for its nav tabs elements?

Question

css

How to override Bootstrap's css for its nav tabs elements?
Here is the html in which I am unable to override the appearance of the tabs:

<div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#register" aria-controls="register" role="tab" data-toggle="tab">Регистрация</a></li>
                            <li role="presentation"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Вход</a></li>
                            <li role="presentation"><a href="#guest" aria-controls="guest" role="tab" data-toggle="tab">Как гость</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="register">
                                <form>
                                    <div class="form-group">
                                        <label for="InputLogin">Логин: </label>
                                        <input type="text" class="form-control" id="InputNewLogin" placeholder="Логин">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputPassword">Пароль:</label>
                                        <input type="password" class="form-control" id="InputNewPassword" placeholder="Пароль">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputNewEmail">e-mail:</label>
                                        <input type="email" class="form-control" id="InputNewEmail" placeholder="e-mail">
                                    </div>
                                    <button type="submit" class="btn btn-default">ИГРАТЬ!</button>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="login">
                                <form>
                                    <div class="form-group">
                                        <label for="InputLogin">Логин: </label>
                                        <input type="text" class="form-control" id="InputLogin" placeholder="Логин">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputPassword">Пароль:</label>
                                        <input type="password" class="form-control" id="InputPassword" placeholder="Пароль">
                                    </div>
                                    <a>Забыл пароль ?</a><br>
                                    <button type="submit" class="btn btn-default">ИГРАТЬ!</button>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane guest" id="guest">
                                <p>Войдя как гость, вы сможете поиграть в нашу игру, но вы будете лишены <a>ряда преимуществ.</a></p>
                                <p>Вы можете войти, <a>как гость</a> и посмотреть игру прямо сейчас!</p>
                                <p>А можете <a>зарегистрироваться</a> и играть с полными привелегиями.</p>
                                <a class="btn btn-default">Зарегистрироваться</a>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Solved the problem of creating separate classes for design elements that need to be redefined.