Если вы используете bootstrap только для сетки, то возможно вам и не нужен bootstrap, нашел интересный подход для создании сетки на просторах интернета
Сетка без bootstrap
See the Pen Header, 2 columns, footer responsive version by Aleksandrs (@CoolS2) on CodePen.0
HTML
Все что нам потребуется в html, это стандартные блоки HTML5 (Шапка, сайдбар, контент и футер). Шапка и футер будут на всю ширину, сайдбар ширина будет 20% и у контента 80%. Еще для примера добавим внутри контента 2 блока, у которых ширина будет по 50%
<div class="wrapper">
<header>My header</header>
<aside>Sidebar</aside>
<article class="content">
<h1>2 column, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
<div class="other-gird-content">
<div class="block">
<h3>Title</h3>
<p>Text on first block</p>
</div>
<div class="block">
<h3>Title</h3>
<p>Text on second block</p>
</div>
</div>
</article>
<footer class="footer">My footer</footer>
</div>
CSS
Опишу только интересные моменты, классу .wrapper мы задаем display: grid; и grid-gap: 10px; — Это относительно новая система верстки, которая пришла к нам в 2017 году. Grid позволяет менять расположение grid элементов не меняя сам HTML. Сейчас мы указали отступ сетки в 10px.
.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
}
На данный момент, система grid работает не на всех браузерах, по этому нужно подстраховаться и задать ширину в %
У grid, есть специальная система измерения fr, которая не может быть нулевым или отрицательным значением. Она рассчитывается после того, как все остальные значения, отличные от fr, были рассчитаны.
.wrapper {
margin: 0 auto;
grid-template-columns: 1fr 3fr;
}
В стилях мы указали что если ширина экрана больше, чем 768px делим блок .wrapper на 2 части (1fr и 3fr). Так же мы указываем, что header и footer у нас начинаются с первой колонки и заканчиваются на последней (grid-column: 1 / -1;).
header, footer {
grid-column: 1 / -1;
clear: both;
}
@supports (display: grid), Если браузер поддерживает grid, то внутри .wrapper, всем задаем width: auto; и margin: 0;
@supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
А вот и все стили вместе:
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 40px;
font-family: 'Open Sans', 'sans-serif';
background-color: #fff;
color: #444;
}
h1, p {
margin: 0 0 1em 0;
}
.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
}
@media screen and (min-width: 768px) {
/* no grid support? */
aside {
float: left;
width: 20%;
}
.content {
float: right;
width: 80%;
}
.block{
float:left;
width: 50%;
}
.wrapper {
margin: 0 auto;
grid-template-columns: 1fr 3fr;
}
header, footer {
grid-column: 1 / -1;
/* needed for the floated layout */
clear: both;
}
}
.wrapper > * {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
/* needed for the floated layout*/
margin-bottom: 10px;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
Это лишь малая часть возможностей grid, думаю что есть смысл изучить эту спецификацию, так как в будущем, когда все браузеры будут свободно поддерживать это, поменяет полностью подход к разработке пользовательских интерфейсов. И это круто.
Не подскажете, а как сделать 3 колонки: по бокам сайдбары, в центре контент?