In bootstrap, I'm trying to show divs A and B stacked on extra small devices and displayed in one line on small devices and above. (just like in this example: https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal)
However, the divs are not stacked on extra small devices (using Firefox ESR 52.4), but stay the same across all device sizes.
Any hint about what I am missing would be great:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Bootstrap related files -->
<link rel="stylesheet" href="vendor/bootstrapcss/bootstrap.min.css">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrapjs/bootstrap.min.js"></script>
<script src="vendor/workarounds/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
A
</div>
<div class="col-sm-8 hidden-xs-down"
style="text-align:right">
B
</div>
</div> <!-- /.row-->
(...)
There are other bootstrap elements further down on the page which work, but the layout instructions do not. I have checked that all related js and css files are available, they all return status 200.
Bootstrap grid classes are specific to certain screen sizes and can be used together. (https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) If you want the divs in the row to stack on extra-small (xs) give them the class col-12 to force the columns to take the full width of the row on devices smaller than 576px wide.
Related
I use bootstrapemail to make my e-mails. But with I have problems with Gmail Mobile Webmail.
The user-icon must not be shown on mobile devices. But here it is shown in the logo in the header.
It doesn't respond to: display: none;. Also it ignores the col-lg classes of bootstrap-email when the header becomes to small. Can eneyone help me?
This is my code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
In the image below tou can see what it looks like now.
Display:none is not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmail
It also doesn't support <style> blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on #media queries in the <style> block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).
You could try adding your own styles like style="width:0;height:0;" (inline on the image) and then adding a custom embedded style to show it in desktops like <style>#media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the <style> block, and you'll have to do something about Outlook, but you can use their conditional block for that)
I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled
This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
Can you say why do this code is not adapt to different mobile devices? I am HTML beginner and can not figure it out. I'm using Bootstrap 4 framework.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="xxxxx.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
<title>xxxxx</title>
</head>
<body>
<div class = "container">
<hr class = "spec-hr">
<div class = "row justify-content-md-center">
<div class = "col-md-6 text-left name">
xxxxxx
</div>
<hr class = "spec-hr">
</div>
<div class="row justify-content-md-center intro">
<div class="col-md-3 text-center">
Photo
</div>
<div class="col-md-3 text-center">
Kontakt<br>
<p class = "email">xxxxx#gmail.com<br>
mobile: xxxx<br>
facebook: xxxxx</p>
</div>
</div>
<hr class = "spec-hr">
<!--Motto-->
<div class="row justify-content-md-center motto">
<div class="col-md-6 text-center">
<p class="motto">Every day is a chance to get better<br></p>
<p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
</div>
</div>
<hr class = "spec-hr">
</div>
</body>
</html>
You use classes such as col-md-6 and col-md-3, these are for medium sized screens., for mobiles, you need classes such as col-6 and col-3. See here for examples and definitions
"Can you say why do this code is not adapt to different mobile
devices?"
The meta tag is wrong. It should be:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The page will never be responsive without the correct meta tag. Please read the documentation...
"To ensure proper rendering and touch zooming for all devices, add the
responsive viewport meta tag to your <head>."
Also see:
Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile
For design to be responsive for mobile devices, use bootstrap classes like col-xs-3, col-xs-6. "col-xs-*" is used to target mobile devices having width greater than 230 and less than 768. Also use #media screen {} to target specific style to specific width mobile device.
recently, I have downloaded videos from youtube on learning bootstrap 4 for responsive web design and everything works fine for me when I use
<div class="col-md-6> the md class for the medium screen and lg class for large screen works fine but xl class for the extra small devices and sm class for small devices no matter how I zoom the page and I have downloaded responsive website test extension for chrome but still nothing. this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn BOOTSTRAP CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
# this is the parent class and it should take the entire page width
<div class="col-lg-6 col-md-6 col-sm-12 bg-primary">
<p>this is the primary color</p>
<div class="row">
# and this is the child class and it should take 6 col of it parent class
<div class="col-lg-6 col-md-6 col-sm-6 bg-success">
<p>this is the success color</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
look like I didn't work because I was using Bootstrap 4, when I used bootstrap
3 the code works fine for me
I'm currently working on a project for which I use foundation 6.
I have this weird problem that my columns stack vertically (they're all 100% width of the screen)
the very simply code that I use is this:
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
this is copied directly from the basic grid examples on the foundation website. I'm certain that i've linked to the stylesheet correctly, because even when I use the full path of the stylesheets this keeps happening.
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
Thanks for the help in advance!
This is because the newest version of Foundation comes with their XY Grid enabled and it wont call the CSS of the class "small-2 large-4 columns"!
If you're using SASS just set the arguments to false in the includes, but I assume you're just using CSS so if you just re-download a custom version and then just check 'float grid' it will get you back to the older grid system and your code should work!
If you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
And heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
Hope this helps!
I can't comment because my rep is under 50, but I wanted to say I am also having this issue. Downloaded Foundation 6 from the site, I have all the files, and I haven't touched the app.css file. Here is my code
Both columns at 100% width.
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class ="row " style= "background-color: aqua">
<div class = "small-6 large-6 columns" style= "background-color: lightblue">content</div>
<div class = "small-6 large-6 columns">more content</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>