Bootstrap, making responsive changes to layout
Using a media query with whatever min/max width set .span4 to display: none;
Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
@media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
@media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
How to create responsive layout in bootstrap 4
Can you please check the below code? Hope it will work for you. We removed the inline style from all elements. We added style in sidebar .sidebar-content as position: fixed; and sets its position as per your requirement. We also added style in .content-main, in that we make it as scrollable content and set padding as per your need further we gave width to .footer(bottom bar) same as a.content-main (main body).
Please refer to this link: https://jsfiddle.net/yudizsolutions/14ybmh92/7/
body {
background-color: #F0F2F5;
}
main {
padding: 56px 0;
}
nav.header{
z-index: 1060;
}
.row .sidebar-content{
position: fixed;
right:0;
bottom:0;
overflow: auto;
overflow-x: hidden;
height: calc(100% - 56px);
z-index: 1050;
background-color: #fff;
}
.content-main{
height:calc(100vh - 112px);
overflow-y: scroll;
}
.footer{
max-width: calc(100% - 16.666667%);
}
@media (max-width:767px)
/* for mobile */
{
.sidebar-content {
position: unset;
height: 100%;
z-index: 100;
background-color: #fff;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<style>
html,
body {
height: 100%;
}
</style>
<body>
<!-- Top Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">logo</a>
</nav>
<main>
<!-- main body -->
<div class="container-fluid h-100">
<div class="row h-100">
<!-- left body -->
<div class="col-sm-10 content-main">
<div class="container-fluid">
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
<!-- side nav Bar -->
<div class="col-sm-2 border sidebar-content" style="margin-top:55px;">
<h5>list</h5>
<hr>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
</div>
</main>
<!-- bottom player -->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<div class="container" style="width: 50%;height: 40px;">
</div>
</nav>
</body>
</html>Bootstrap: Layout not responsive even while using correct classes
The primary reason your layout is not responsive is because you've set explicit height rules in your CSS. Take section#about, for example—if you remove the explicit height: 980px; you set in your stylesheet, the Pixel Perfect paragraph will no longer overlap with the Looking for the perfect template to use? title.
Second, you are improperly using the Bootstrap grid. I noticed that you have a .container class for almost every section. Ideally, you should remove those and only have one .container class which encapsulates the entire page (unless you want to use different container sizes on one page).
Here is an example:
<body>
<div class="container">
<section id="intro" class="row">
<div class="col-md-4">
</div><!-- end .col-md-4 -->
<div class="col-md-4">
</div><!-- end .col-md-4 -->
<div class="col-md-4">
</div><!-- end .col-md-4 -->
</section><!-- end #intro section -->
<section id="about" class="row">
<div class="col-md-6">
</div><!-- end .col-md-6 -->
<div class="col-md-6">
</div><!-- end .col-md-6 -->
</section><!-- end #about section -->
</div><!-- end .container -->
</body>
Note: There is an exception with the Navbar/Footer, in which case you can put separate containers inside those elements as you already
did with the Navbar.
Third, use more .row classes as "blocks" for each vertical section on your page. You did this within your sections, but it might be a good idea to make the sections themselves individual rows as well by giving them the .row class—after you've removed the containers from each section.
Next, you don't need to define rules for every screen size as kosmastsk suggested. If you like the way it looks with just defining breakpoints for col-sm then that is up to you. It will look better, though, if you develop mobile first and work your way up to larger screen sizes.
Also consider using more CSS Media Queries to help you better customize your site if you must override heights, widths, etc.
How to swap grid layout on device width (responsive design) using Bootstrap?
You want to take advantage of bootstraps predefined column classes which target different screen sizes, where you could do something like:
<div class="row">
<div class="col-xs-9 col-sm-6 col-lg-6">product name</div>
<div class="col-xs-9 col-sm-6 col-lg-6">description</div>
<div class="col-xs-3 col-sm-12 col-lg-12">image</div>
</div>
In the above you will deciding your product grid layout by defining the col-xs-* and col-sm-* columns in all likelihood. Play around with it a bit and make it work for your own layout.
Also if you haven't already you are going to want to read up on media queries which will allow you to change your stylesheets based on screen size and you will also want to look into "push and pull techniques with bootstrap to help you reorder your columns if necessary.
It is always a good idea to try and develop for mobile first as you will be doing less backtracking and keeping your css code lighter. If you have more specific questions post them here because it is an excellent resource.
Based on different resolutions, how to make design responsiveness using bootstrap grid system?
So on a Bootstrap row with three items, using col-md-12 as one of the classes doesn't make much semantic sense. Essentially because a col-12 is supposed to span the full-width. For a responsive Bootstrap design, it would be semantically correct to use col-lg-4 for large screens, col-md-4 for medium screens, and it will use col-sm-4 for mobile devices like phones. I added w-100 for 100% width and text-center to align text to the center. See the changes I made below.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<div class="container w-100">
<div class="row text-center">
<div class="col-lg-4 col-md-4 col-sm-4">
One
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
Two
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
Three
</div>
</div>
</div>Related Topics
Multiple Navbars on The Same Page with Twitter's Bootstrap 3
CSS Ie8 Can't Style a List Element
Can't Load CSS File in Javafx 8
Center Div in Parent with Only Min-Height, and Child May Without Height & with Relative Position
Vertical Vim Cursor in Command Mode
How to Scroll a Div Content Between Another 2 Flex Divs
Loops Make Less to Run Out of Memory. (Structure Optimization)
CSS: Position Loading Indicator in The Center of The Screen
How to Properly Set an Element's Scope Using Bem
Bootstrap 3.0 Button in Navbar