I checked bootstrap.min.css and width:100% is not mentioned for navbar, navbar-inverse and navbar-fixed-top classes but still it is displaying 100% width for header section.
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container">
<div >
<h3>Free Area</h3>
</div>
</div>
</nav>
Similarly I want to display footer in 100% width according to page width. I used below CSS and HTML code but it is not displaying 100% width footer. So how can I make footer so it displays in entire width of page?
CSS
footer { margin: 0px 0; background:#006699; }
HTML
<footer>
<div class="container">
<div class="row ">
<div class="col-md-6 col-sm-6">
<h3>Section Area 01</h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="col-md-6 col-sm-6">
<h3>Section Area 02</h3>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
</footer>
As requested by the OP, the issue the OP is facing is, having either <footer> or <header> to be confined to the width of the .container of the Bootstrap framework. One best solution for this is to put the elements directly under the body.
So, your solution would be, replacing (probably) this old code:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<!-- Contents -->
</header>
<!-- Body -->
<footer>
<!-- Contents -->
</footer>
</div>
</div>
</div>
</body>
To get it out of the .container, which limits the width and placing it directly under <body> like this:
<body>
<header>
<!-- Contents -->
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Body -->
</div>
</div>
</div>
<footer>
<!-- Contents -->
</footer>
</body>
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
I am currently using a Bootstrap for my website with a left sideBar navigation.
At the main content, i have 2 container for left and right content.
What I want is like the image below and i already done this:
and when the toggle button is clicked then the `rightDiv` will resize
which is my main problem and i'm not able to do:
and when the browser/device is small lets say mobile device then it be
like this and i already done this.
I am able to do the first and third image but failed at the second image which will resize the rightDiv on toggle button clicked.
so far i have this in my HTML:
<div id="wrapper">
<!--Start of Sidebar navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<!-- End of Sidebar navigation-->
<!-- Start Main Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="row-post-container">
</div>
<!--END OF LEFT DIV-->
</div>
<!--START OF RIGHT DIV-->
<div class="main-right-side-container">
<div class="right-side-container">
....
</div>
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
<!-- END Main Content -->
</div>
and in my CSS i have this for left and right sidebar of DIV:
.row-post-container{
display: table-cell;
float: left;
max-width: 800px;
width: 100%;
min-width: 300px;
margin-right: 20px;
}.main-right-side-container{
display: table-cell;
min-width: 300px;
width: 100%;
max-width: 300px;
vertical-align: top;
height: 300px;
float: left;
padding: 0px;
margin-top: 20px;
}
Anyone has an idea?
For more clarification please do ask me.
Please suggest only CSS.
Thak you very much.
EDIT: the orange is leftDiv and dark green at the right side of orange is RightDiv.
One of the main things you are not considering is having bootstrap columns.
I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -
Current Implementation on the example site
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!-- your code here -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Change to add columns like below -
In here, i suggest you should go on about adding more columns like so -
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8"> <!-- your leftDiv code here --> </div>
<div class="col-lg-4"> <!-- your rightDiv code here --> </div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
First try to make full use of bootstrap classes, check this-
HTML-
<p><input type="button" id="showHideBtn" value="Slide Menu"></p>
<div id="sidebar-wrapper col-md-3">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<div id="page-content-wrapper" class="col-md-9">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="col-xs-12 col-md-9 row-post-container">
</div>
<!--END OF LEFT DIV-->
<!--START OF RIGHT DIV-->
<div class="col-xs-12 col-md-3 main-right-side-container">
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
CSS -
.hide{display:none !important;}
JS -
$('#showHideBtn').click(function(e){
$('#sidebar-wrapper').toggleClass('hide');
if($('#page-content-wrapper').hasClass('col-md-9')){
$('#page-content-wrapper').removeClass('col-md-9');
}else{
$('#page-content-wrapper').addClass('col-md-9');
}
});
I need that some content in my page would keep its position on screen even if the user scrolls the page right.
My HTML is very simple:
<head runat="server">
<title>Bla</title>
</head>
<body>
<!--header start-->
<header class="header dark-bg"></header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu"></ul>
<!-- sidebar menu end-->
</div>
</aside>
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home
</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
</section>
</section>
</body>
Take a look at:
https://jsfiddle.net/2wn8qgyb/
When scrolling right, I expect that the "Dashboard" and "Home / Dashboard" text wouldn't disappear and stand still. I want the user to have an option to click it without scrolling back to the left.
In your html, add an extra classname to this div <div class="col-lg-12">, it should now look like <div class="my-nav-bar col-lg-12">
After that, just add this to your css file:
.my-nav-bar{position:fixed;}
Here is a working Demo
Add this to your css:
.page-header {
position:fixed;
}
.breadcrumb {
position:fixed;
}
Fixed the Position of your div which you don't want to disappear
.div
{
position:fixed;
}
I use the basic Bootstrap Affix method to scroll to sections when clicking on a list group item.
This all works well.
The issue is, the content's title (anchor) disappears behind the header section of my pages
With fixed Top Navigation, it disappears behind the Menu, if the Top navigation is not fixed, but The WP Admin Toolbar is visible (logged in user), it disappears behind the Admin Toolbar.
Is there any way to set a kind of "Top Margin" for the title (anchor), so it will not scroll that far up?
To xplain better see this screenshots:
BEFORE
AFTER
I do not use JS but use just simple HTML for it.
Here the Mockup:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9">
<!--Content start-->
<div class="wrapper">
<div id="section-2" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-6" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>
I have also tried to play with data-offset-top, but that is not even influencing the content, it is intended for the List (where you click to scroll-to)
Anybody has a idea why this is happening and how I could have the "Title" of post (my actual anchors) as the "upper limit" so that "titles" won't disappear behind the Menu/Admin bar?
Appreciated...
This solutions I already tried:
Not working, completely out of scope (padding to body won't solve anything here)
Bootstrap affix issues with sticky top navigation
CSS solution that will break the scroll experience and is not working in my case, I did not try yet the JS solution...
Div anchors scrolling too far
Try to combine positive padding-top and the same negative margin-top for .section
$(document).ready(function(){
$("#nav").affix();
});
.section {
padding-top: 26px;
margin-top: -26px;
}
.section:first-child {
margin-top: 0;
}
#nav {
width: 170px;
margin-top: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div id="nav" data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9" style="overflow: hidden;">
<!--Content start-->
<div class="wrapper">
<div id="section-1" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-2" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>