VeeeneX
VeeeneX

Reputation: 1578

Bootstrap container-fluid - disable margin

This is a problem , that I have: https://i.sstatic.net/i80Yl.jpg . This is a part of Bootstrap menu. Some more informations have been added

Header

            <link rel="stylesheet" type="text/css" href="view/stylesheet/stylesheet.css" />
            <link rel="stylesheet" type="text/css" href="view/stylesheet/bootstrap.css" />

But when i want to overwrite any Bootstrap options i need to use !important. I dont want to change Bootstrap css.

HTML

<div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <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="http://localhost/Web/E-Shop/admin/index.php?route=common/home&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Obchod</a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Catalog<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/category&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92"> Categories</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/product&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Products</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/filter&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Filters</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/profile&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Profiles</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/attribute&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Attributes</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/attribute_group&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Attribute Groups</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/option&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Options</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/manufacturer&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Manufacturers</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/download&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Downloads</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/review&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Reviews</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=catalog/information&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Information</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Extensions<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=extension/module&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Modules</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=extension/shipping&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Shipping</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=extension/payment&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Payments</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=extension/total&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Order Totals</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=extension/feed&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Product Feeds</a></li>
                                                                            </ul>
                                </li>
                                <li class="dropdown">               
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sales<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/order&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Orders</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/recurring&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Recurring Profiles</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/return&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Returns</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/customer&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Customers</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/customer_group&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Customer Groups</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/customer_ban_ip&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Banned IP</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/affiliate&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Affiliates</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/coupon&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Coupons</a></li>
                                        <li class="divider"></li>
                                          <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/voucher&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Gift Vouchers</a></li>
                                          <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/voucher_theme&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Voucher Themes</a></li>
                                        <li class="divider"></li>
                                                                          <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=sale/contact&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Mail</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">System<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=setting/store&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Settings</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=design/layout&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Layouts</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=design/banner&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Banners</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=user/user&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Users</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=user/user_permission&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">User Groups</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Localisation<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/language&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Languages</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/currency&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Currencies</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/stock_status&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Stock Statuses</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/order_status&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Order Statuses</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/return_status&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Return Statuses</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/return_action&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Return Actions</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/country&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Countries</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/zone&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Zones</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/geo_zone&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Geo Zones</a></li>
                                        <li class="divider"></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/tax_class&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Tax Classes</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/tax_rate&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Tax Rates</a></li>
                                        <li class="divider"></li>       
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/length_class&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Length Classes</a></li>
                                        <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=localisation/weight_class&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Weight Classes</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=tool/error_log&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Error Logs</a></li>
                                <li><a href="http://localhost/Web/E-Shop/admin/index.php?route=tool/backup&amp;token=dac2fdfed5ea52154c40dd0ad17dbe92">Backup / Restore</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                    </div>

CSS

.navbar-default {
    background-color: #00598e !important;
    border-color: none !important;
    color: #fff !important;
}
.navbar-default .navbar-nav > li > a {
    color: #fff !important;
}
.navbar-default .navbar-brand {
    color: #FFF !important;
}
.dropdown .open{

}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown:hover {
    background-color: #0077c0;
}
.vertical-offset-100{
    padding-top:100px;
}
.footer-s{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
}
.alert{
    margin-top: 30px;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    background-color: #00598e;
    border-color: #00598e;
}
.dropdown-menu>li>ul>li>a:hover, .dropdown-menu>li>ul>li>a:focus{
    text-decoration: none;
    color: #262626;
    background-color: #F5F5F5;
}
.container{
    margin-top: 50px;
}
.btn>a:hover,
.btn>a:focus,
.btn>a {
    color: #fff;
    text-decoration: none;
}
.scrollbox{
    height: 120px;
    width: auto;
    border: 1px solid #ccc;
    overflow: auto;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #FFF;
    background-color: #0077c0 !important;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF !important;
}

Upvotes: 1

Views: 1191

Answers (1)

dlane
dlane

Reputation: 1131

I suggest you move your override or custom stylesheet below (after) the boostrap CSS file. Then, you shouldn't need to use !important as much or ever. Just remember that you'll need to match or exceed the same specificity in your custom stylesheet to make overrides.

<link rel="stylesheet" type="text/css" href="view/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="view/stylesheet/stylesheet.css" /> <!-- moved below bootstrap.css -->

Upvotes: 1

Related Questions