Laravel + Bootstrap - Side by Side Side by Side with Content
I am using Laravel + bootstrap with columns / rows.
However, when I use a smaller screen. The sidebar is at the top and bottom.
I want both of them to stay in their positions and become smaller.
This is how I want it to look on both desktop and phone / tablets
This is how it looks on the phone:
Is there a way to fix them side by side and still keep them responsive as laravel and bootstraps intend.
This is the main layout.
<div id="container-fluid">
<div class="container">
<div class="col-sm-12">
<div class="col-sm-3">
@yield('sidebar')
</div>
<div class="col-sm-9">
@yield('content')
</div>
</div>
</div>
</div>
source to share
I think you can also play this way. Please note that I am just adding temporary inline CSS. I don't recommend adding inline CSS.
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<div style="background-color:#9E2121; height:200px;">@yield('content')</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<div style="background-color:#55A03D; height:600px;">@yield('content')</div>
</div>
</div>
</div>
</div>
You can see the output like this:
source to share
You need to change the columns from sm (Small Devices like Tablets) to xs (additional Small Devices like phones).
<div id="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-3">
@yield('sidebar')
</div>
<div class="col-xs-9">
@yield('content')
</div>
</div>
</div>
</div>
From http://getbootstrap.com/css/#grid :
Grid classes apply to devices with screen widths larger than or equal to breakpoint sizes and override smaller device-oriented grid classes. Therefore, for example, applying any class
.col-md-*
to an element will not only affect its styling on media, but also on large devices if the class is.col-lg-*
missing.
source to share