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>
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 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>
I am attempting to access an image in vue.js and render to the DOM, but it is not working.
This is the code :
<template lang="html">
<div>
<h1 class=""> {{ Tex }}</h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3><b>Connect Soft documents</b></h3>
<p class="lead">Allow documents that feed into each other to provide a consistent, untainted view of the financial, operational and social behaviour of the institution.</p>
</div>
<div class="col-sm-4">
<img src="ConnectDocuments.png" alt="Documents" class="pull-right img-responsive imG" width="250" height="250">
</div>
</div>
<hr>
<div class="row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole webpage when the device is less the 768px-->
<div class="col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class="lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class="col-sm-6">
<img src="./assets/Statistics.png" alt="Statistics" width="350px" height="270px" class="pull-right img-responsive imG">
</div>
</div>
</div>
</div>
</template>
This is an image of the project folder to see how I am referencing the image path.
I think you misspelled ../../assets/Statistics.png
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/
My aim is to keep 2 images side by side in large screens and one above another in small screens.The problem what I have done is doing the opposite.In large screens images are coming one above another and in small screens images are coming side by side.
Please see this fiddle.
This is my html code
<!--nav bar-->
<div class="container">
<div class="row">
<div class="col-md-18">
<div >
<img src="http://www.computerhope.com/logo.gif" alt="Logo" class="round"> my user
</div>
</div>
<div class="col-md-6">Recently purchased
<div id="slideshow">
<span class="images">
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/abstract" />
<span class="caption simple-caption">
<p>Review</p>
</span>
</div>
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/food" />
<span class="caption simple-caption">
<p>Review</p>
</span></div>
</span>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>
I have not posted the js codes because I feel its not necessary But if you want then please check the fiddle
Please see the screenshot,
Add img-responsive class to image tag and not div tag. Also col-lg-18 not possible to have 18 columns unless you have customised it, by default 12 is the max columns u can have.