I am using bulma.io to create a layout only without anything else, so when I create a couple of section html items with containers in them, after adding a columns inside one of the container this will cause the parent container of the columns to overlap the previous html element that is displaying the elements.
Here is a codepen example:
https://codepen.io/vudrok/pen/XWBeYMG
So I tried something like this:
<section class="top">
<div class="container">
<div class="level">
<h1 class="title">Top div item</h1>
</div>
</div>
</section>
<section class="middle">
<div class="container">
<div class="section">
<h1 class="title">Middle item</h1>
</div>
</div>
</section>
<section class="bottom">
<div class="container">
<div class="columns">
<div class="column">Content of first column</div>
<div class="column">Content of second column</div>
<div class="column">Content of third column</div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
Bulma example of columns overlapping container to previous element
</p>
</div>
</footer>
I am specting the sections to be just one after the other respecting their space nothing should be ontop of anything or have extra space.
In my work, I want the right-sidebar, left-sidebar, mid-sidebar boxes to be at page height and to stay fixed on the page by scrolling after the hedar. It should be placed between the footer and the header. like the twitch chat section
body{margin:0px;padding:0px;}
.header-wrapper{width:100%;background:gray;}
.outer-wrapper{width:100%;height:auto;}
.left-sidebar{width:15%;background:red;height:1000px;float:left;}
.main-wrapper{width:45%;background:yellow;height:1000px;float:left;}
.mid-sidebar{width:20%;background:blue;height:1000px;float:left;}
.right-sidebar{width:20%;background:orange;height:1000px;float:left;}
.footer-wrapper{width:100%;background:green;}
<body>
<div class="header-wrapper">HEADER
</div>
<div class="outer-wrapper">
<div class="left-sidebar">
</div>
<div class="main-wrapper">
</div>
<div class="mid-sidebar">
</div>
<div class="right-sidebar">
</div>
</div>
<div class="footer-wrapper">FOOTER
</div>
</body>
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
I'm trying to create a home page screen where the buttons in the body take up the full screen after the header and footer. Ideally the buttons 2x2 will stretch out to the remaining space on the screen.
I tried using ui-grid-a to stretch the buttons to the width of the screen but was unable to alter the height to the screensize.
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
I'm a noobie at coding so any help would be appreciated. Thanks in advanced.
I believe this is what your looking for. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/
CSS
<style>
.button{padding:25% 0;}
</style>
HTML
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
</section>
Does this work:
http://jsfiddle.net/Pq9YP/
Using a navbar with one list item