Bootstrap 4 general layout issue with main content and sidebar
Question
I'm having some issues with the general layout of my site, specifically how my main content area and sidebar are positioned. My rough draft layout is:
And I'm using the following code to create it for real (it's spread through a few different files as this is a Symfony 3.4 project) -
base.twig.html:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="keywords" content="Sewing Diva, online shopping, online store, shop, store, quilting, quilts, sewing, sew, fabrics, patterns, notions, gift shop, gifts, Derry NH">
<meta name="description" content="The Sewing Diva Quilt and Gift Shop offers customers many fabrics, patterns, and notions to buy online">
{% block noindex %}{% endblock %}
<title>{% block title %}The Sewing Diva Quilt and Gift Shop{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('build/favicons/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('build/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('build/favicons/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('build/favicons/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('build/favicons/safari-pinned-tab.svg') }}" color="#5bbad5">
</head>
<body>
<div id="site" class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
<img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
<img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-none d-lg-inline w-50" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center">
<div class="nav-item mb-lg-5">
<div class="d-none d-lg-block">
<a class="nav-link d-lg-inline" href="{{ path('fos_user_security_login') }}">Login</a> | <a class="nav-link d-lg-inline" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
</div>
<div class="nav-item mb-lg-3">
<div class="d-none d-lg-block social-media">
<a class="nav-link d-lg-inline-block" href=""><i class="far fa-envelope"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-facebook-square"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
<a class="nav-link d-lg-none" href="{{ path('fos_user_security_login') }}">Login</a>
<a class="nav-link d-lg-none" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
<form class="form-inline my-2 my-lg-0 mx-auto d-inline d-lg-none" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav> <!-- end nav -->
<div class="row justify-content-center">
{% block sidebar %}{% endblock %}
{% block content %}{% endblock %}
</div> <!-- end content -->
<div id="footer" class="row"> <!-- TODO: a real footer -->
<p id="copyright">© The Sewing Diva</p>
<p id="mp">Site created and maintained by Major Productions</p>
</div> <!-- end footer -->
</div> <!-- end site -->
{% block js %}
{{ encore_entry_script_tags('app') }}
<script src="https://js.stripe.com/v3/"></script> <!-- For fraud protection -->
{% endblock %}
<script type="text/javascript">
var success = $('#flash-success');
var error = $('#flash-error');
if (success.length > 0) {
success.fadeOut({ duration : 5000 });
}
if (error.length > 0) {
error.fadeOut({ duration : 5000 });
}
</script>
{% block jscode %}{% endblock %}
</body>
</html>
index.twig.html:
{# app/Resources/views/Store/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
<div class="col-md-3 bg-beige container">
{{ render(controller('AppBundle:Store:categoryList')) }} <!-- figure out indents -->
</div>
{% endblock %}
{% block content %}
<div class="col-md-9 border container" id="content">
{% if newestProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Our latest item:</h2>
<div class="row">
<div class="jumbotron" style="background: transparent">
<!-- TODO: figure out structure -->
</div>
</div>
<h2>Some more recent items:</h2>
<div class="row">
{% for newestProduct in newestProducts[1:] %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ newestProduct.name }}</h5>
{#{% if newestProduct.description != null %}<p class="card-text">{{ newestProduct.description }}</p>{% endif %}#}
<p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if saleProducts == null %}
{% else %}
<h2>Some items currently on sale:</h2>
<div class="row"> <!-- card deck instead? -->
{% for saleProduct in saleProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ saleProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ saleProduct.name }}</h5>
{% if saleProduct.description != null %}<p class="card-text">{{ saleProduct.description }}</p>{% endif %}
<p class="card-text">${{ saleProduct.price }}/{% if saleProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': saleProduct.slug, 'prodId': saleProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if randomProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Some other things you may like:</h2>
<div class="row">
{% for randomProduct in randomProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ randomProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ randomProduct.name }}</h5>
{% if randomProduct.description != null %}<p class="card-text">{{ randomProduct.description }}</p>{% endif %}
<p class="card-text">${{ randomProduct.price }}/{% if randomProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': randomProduct.slug, 'prodId': randomProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
category_list.twig.html:
{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}
<h2>Shop By Category:</h2>
<p><a href="">Newest Products</a></p>
<p><a href="">Products on Sale</a></p>
{{ htmlTree|raw }}
Which, all together, creates the following:
My biggest issue is that the sidebar/category list overhangs the navigation. I'm guessing that navbar has some x-axis margin/padding. So, I want to constrain the two columns - sidebar and content - to be within the visible width of the navbar . Ideally, the navbar wouldn't have any white space on the left/right sides.
I think I can handle the rest through a combination of fiddling around with columns, margins, and padding, but keeping everything uniform on the edges is a priority.
1 answers
solution1
1 ACCPTED 2018-11-28 00:32:22
Put the container inside your navbar instead
<div id="site">
<nav class="navbar ...">
<div class="container-fluid">
<a class="navbar-brand" ... />
<button class="navbar-toggler" ... />
<div class="collapse" ... />
</div>
</nav>
</div>
The container usually has left and right padding. If you put the navbar with a background color inside the container, it would show a gap horizontally.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Align sidebar with my main content bootstrap
Bootstrap fixed sidebar causes main content to overlap
Bootstrap 3.0 Centered Main Content with right Sidebar
HTML - Bootstrap: Sidebar pushes main content down
Bootstrap prevent sidebar from overlaping with main content
LARAVEL-8, BOOTSTRAP-5. Im using an external CSS file for main layout for header and sidebar and when i @extends, the content format is distorted
Splitting sidebar into top and bottom around main content with Bootstrap
HTML general layout issue
Content Under Sidebar in Bootstrap
bootstrap layout markup for right sidebar
Related Tags