Responsiveness of Bootstrap page [duplicate] - html

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.

Related

Bootstrapemail Gmail-mobile-webapp does not support `display: none`

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)

Jumbotron is not showing in bootstrap [duplicate]

This question already has answers here:
How to create jumbotron in Bootstrap 5?
(9 answers)
Why the jumbotron class is not working in bootstrap 5 version? [duplicate]
(2 answers)
Closed 1 year ago.
I am currently new to using bootstrap and have come across a problem regarding the jumbotron. When I apply it, it does not show but everything inside does. This is the code:
<html lang="en">
<head>
<title>Boostrap Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bs/bootstrap.min.css">
<script src="bs/jquery.slim.min.js"></script>
<script src="bs/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Home page is coming soon!</h1>
<p>This website!<p>
Test this button!
</div>
</div>
</body>
</html>
I have a folder that I installed that contains all of the .min files. I have checked and they all don't seem to have any problems. Does anyone have a solution to this?
According to the Bootstrap 5 migration document, Jumbotron was "Dropped".
The jumbotron component as it can be replicated with utilities. See
our new Jumbotron example for a demo.
A BS5 example they provide is:
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>

Bootstrap - Align 2 divs vertically on responsive mode

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

I have an issue with bootstrap 4

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

Bootstrap viewports not recognized

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.