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>
Related
I am trying to create a sliding tile structure in Sharepoint.
I have already succeeded in having the tile slide open once when it is clicked on the basis of a parent and child tile. Now I would like it to be able to slide open again, so three-part drop menu
<div class="tile largeTile green" onclick="DropDown(this)" Parent="tegel">
<div class="tileFront" title="S2">
<div class="title">
Tegel
</div>
</div>
</div>
<!--Start Child containers for tegel-->
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<!--End of child containers tegel-->
I tried putting a child after a child but it doesn't work, and I have no idea how to use the 'element' code. I read somewhere about an element as 3rd menu but I have no idea how to insert it in the code.
There are still 2 files, 1 .css file containing the layout of the tiles and Javascript for the operation of the tiles. I will probably need to add code to this as well.
Hopefully someone can help me with this
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>
For example:
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
</div>
...
</div>
Imaging that the blocks are big ones, and the browser view cannot hold all of them at the same time. Is there a way if I can get idea that a particular block get displayed and viewed by user?
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/
The codes can be viewed at
http://www.bootply.com/LUNqVTU2nj
<div class="container">
<div class="row">
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> First </h2>
</div>
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Second </h2>
</div>
<div class="col-md-3">
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Third </h2>
</div>
</div>
</div>
As can be seen in Bootply, the third image are not rendered at the correct place..
I thought it is wrong because a row can't contain columns whose total width is larger than 12, but on Bootstrap3 official sites, I saw codes like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Is this wrong? If not, why can't my codes work..
Moreover, is it possible to write all columns (for example, 30 columns) in one row and expect bootstrap to layout them correctly?
Your code is OK and a row can content more than 12 cells (a gallery for example) but your problem is that your divs has not the same height and you need to apply a "reset". To avoid this problem you need to insert a div class clearfix when you reach 12 cells.
I mean, in your example:
...
<div class="col-md-3">
<h2> Second </h2>
</div>
<div class="clearfix visible-md-block visible-lg-block">
...
Doc about Bootstrap clearfix: http://getbootstrap.com/css/#grid-responsive-resets.
Also you could add javascript to apply same height to all your cells.
.col-md-3{width: 25%;}
.col-sm-4{width: 33.3333333%}
So obviously only 4 elements could be contained in a single line, while you've placed 6. You can use class .col-xs-2 instead.
Whatever code you have seen on bootstrap site is correct, but meaning is different. In a row only 12 columns are there, i think you are telling about xs having addition (xs-12 and xs-6) but meaning is that when you make it as xs then xs-6 will go to next line as shown in screen show, so use only 12 columnss in row
It's because in the example Bootstrap code you've posted they use different classes for different viewport sizes. Also anything over 12 will just "stack up".
So for example in this particular row:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
The md viewport adds up to 12 and will stay within one row with a size of 8 and 4.
The xs viewport adds up to 18 and 2 rows will be created where they stack up, where the first row will be 12 and the second will be 6.