I am trying to create a horizontally scrolling website, but it feels that I am at a dead end. The website I want to create shouldn't have a horizontal scrollbar and it needs to "jump" from page to page when using the navigation links.
Here is a basic version of the website I currently have - Horizontal Scrolling Project
What I am trying to achieve:
The navigation links should be the only way of navigating and scrolling should have no effect on navigation.
Each module should be on a single page and it's very important that when a module is higher than the height of the page, it is able to scroll to the bottom of the module. The navbar and footer should also always be visible.
And last but not least, it should be able to work with Bootstrap 4.
Please note that I am not expecting someone to do this entire project for me, but rather that if someone could help me or knows of any resources I could check out, I would really appreciate it!
Code:
<html>
<body>
<div class="bar">
<div class="container-fluid">
<div class="row">
<div class="col text-left">
<p>👈</p>
</div>
<div class="col text-center">
<span class="main-link">
Download
</span>
</div>
<div class="col text-right">
<p>👉</p>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">01</p>
</div>
<!--MODULE END-->
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">02</p>
</div>
<!--MODULE END-->
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Made by Jeroen</p>
</div>
</footer>
</body>
</html>
Related
Good evening,
I have a question regarding the Bootstrap 4.1 Grid. I built a normal website with multiple "containers" and "columns".
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
On normal displays, this works perfectly fine as both containers are showed underneath each other.
But on very large screens the containers are besides each other.
How can I adjust my code, so that independently of the screen size, the containers are always showed below each other.
Thank you in advance!
I can't really reproduce your issue but you might be missing an equal sign in your classes.
class="container"
class="row"
You are missing equals
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
i have 3 column in bootstrap and i want the scroll only the middle dive while keeping the position relative to the parent container . something like facebook scroll
<div class="container">
<div class="row">
<div class="col-md-3">stop scrolling when content end </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> stop scrolling when content end </div>
</div>
</div>
i tried using position fixed , but when i use it .it messes the grid system , thats why i want the position to stay relative to the parent if possible .
If I understand the question, you can use sticky-top like this...
https://www.codeply.com/go/IL1wlzpNEP
<div class="container">
<div class="row">
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
</div>
</div>
The middle column will scroll the length of its' content.
I am working with bootstrap and I would like to change default div positions when screen changes to small screen. Basically bootstrap div positions like this.
But I want divs like this.
I have tried pull and push method. But it doesn't work.
Thanks.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://loremflickr.com/320/240" />
</div>
<div class="col-sm-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
<div class="col-sm-6">
<img src="http://loremflickr.com/320/240" />
</div>
</div>
Bootstrap works from small to big, check the Grid system documention. So in your case, if you want to set all the divs at full width, use the col-xs-12 class everywhere:
<div class="row">
<div class="col-xs-12">
...image
</div>
</div>
<div class="row">
<div class="col-xs-12">
second row
</div>
</div>
...etc
(see below for my edit. First the CSS way, then the BS4 way)
If you're using v4 beta and its flexbox grid, you can use order property in a MQ to rearrange the items of the BootStrap grid.
(negative including) -1 value: will display before others (from the most negative to -1 and for identical values in the order of appearance in markup
0 (which is the default): no rearrangement
(positive including) 1: will display after others (from 1 to the most positive and for identical values in the order of appearance in markup
Bootply with v4 beta: https://www.bootply.com/U4Koah4OcO
In markup, I rearranged items in the order you want in XS and via a MQ for small and up rearranged image to display after all other. If you don't want to modify your markup then you can set order: 1 on the last paragraph and override it to 0 in small and up resolutions.
EDIT: The BootStrap v4 way of reordering is using .order-N classes. Documentation
#media (min-width: 576px) {
.not-here-but-there {
order: 1;
outline: 3px dashed blue;
}
}
<!-- With BS v4 beta -
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="http://loremflickr.com/320/240" />
</div>
<div class="col-sm-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
<div class="col-sm-6 not-here-but-there">
<img src="http://loremflickr.com/320/240" />
</div>
<div class="col-sm-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
</div>
</div>
#Melbin Mathai Please check following code, in which I have added bootstrap classes for different screens. I hope you were expecting the same.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<img src="http://loremflickr.com/320/240" />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<img src="http://loremflickr.com/320/240" />
</div>
</div>
Try this
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 col-md-6">
<img src="https://loremflickr.com/320/240" />
</div>
<div class="col-sm-12 col-md-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-12 col-md-6 col-md-push-6" >
<img src="https://loremflickr.com/320/240" />
</div>
<div class="col-sm-12 col-md-6 col-md-pull-6">
<h4>
New here!
</h4>
<p>
LoremFlickr is a service that provides free placeholder images for web and print. ... Photos come from Flickr and have a Creative Commons license. ...
</p>
</div>
</div>
</div>
</div>
I have created three panels that sit horizontally in a row inside a fluid container each with col-lg-4 classes, however, when i reduce the browser size to below 1200px, they stack on top of each other and expand to full browser width. I want the panels to expand to full width at around a 900px breakpoint, not 1200px.
Here is an example of what the panels in the webpage look like above 1200px browser width:
https://i.stack.imgur.com/MVi6L.png
and here is an example of what the panels in the webpage look like below 1200px browser width:
https://i.stack.imgur.com/RAfUB.png
Here is my code:
<div class="container-fluid trse-feature">
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default panelL">
<div class="panel-body icon">
<h2 class="text-center">We also work in conjuction with</h2>
</div> <!-- end panel-body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default panelM">
<div class="panel-body">
<img src="trsenone.png" class="img-responsive">
</div> <!-- end panel body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default panelR">
<div class="panel-body">
<p class="text-center trse-p"> TRSE is a certified Notification Body (NoBo) and all TMD maintenance proposals are business cased to demonstrate the benefits from an optimised, improved and Engineering Accepted maintenance regime. </span></p>
</div> <!-- end panel-body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
I think it is something to do with altering the bootstrap breakpoints like so:
#media (max-width: 1200px) {}
but i'm not entirely sure what to implement.
Thanks!
Use this code. This is working correctly:
<div class="container-fluid trse-feature">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default panelL">
<div class="panel-body icon">
<h2 class="text-center">We also work in conjuction with</h2>
</div> <!-- end panel-body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
<div class="col-md-4">
<div class="panel panel-default panelM">
<div class="panel-body">
<img src="trsenone.png" class="img-responsive">
</div> <!-- end panel body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
<div class="col-md-4">
<div class="panel panel-default panelR">
<div class="panel-body">
<p class="text-center trse-p"> TRSE is a certified Notification Body (NoBo) and all TMD maintenance proposals are business cased to demonstrate the benefits from an optimised, improved and Engineering Accepted maintenance regime. </span></p>
</div> <!-- end panel-body -->
</div> <!-- end panel -->
</div> <!-- end col-lg-4 -->
For col-lg-x the breakpoint is at 1200px, for col-md-x is at 992px, for col-sm-x at 768px and if you use col-xs-x, the columns never collapse. You can use col-md- instead of col-lg- and edit the breakpoint in the css from 992px to 900px if 992px is not ok.
Or you can define your own media query and your own class for this.
Replace
col-lg-4
to
col-lg-4 col-md-4 col-sm-4 col-xs-4
This is basically giving support to all devices (Desktop/ipads/ mobile).
You can also change the breakpoints of these divs.
lg is for bigger screens.
md for laptop and small screens.
sm is for ipads.
xs is for mobile .
Bootstrap is a 12 column grid system so here 4+4+4 = 12 makes the logic.
In your case you were only using col-lg-4 class which is written only for big desktop screens and after 1200px the css was not working.
You can also use just col-sm-4 if you want to just minimize the
things.
Simply use the md breakpoint instead which stacks at 992px.
<div class="col-md-4">
<div class="panel panel-default panelL">
<div class="panel-body icon">
<h2 class="text-center">We also work in conjuction with</h2>
</div> <!-- end panel-body -->
</div> <!-- end panel -->
</div>
Demo: http://www.codeply.com/go/KeLX4nQ1vs
col-xs-4 will not stack vertically
col-sm-4 will stack at 768px
col-md-4 will stack at 992px
col-lg-4 will stack at 1200px
Breakpoints and the Bootstrap Grid
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/