I seem to be having some strange issues with IE 11. Nothing is contained like it is in Chrome and everything is overflowing like crazy.Everything looks fine in Chrome and Safari and any mobile browser, but IE11 is struggling.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Forward | Reimagining adn.com</title>
<meta name="description" content="Reimagining adn.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app"myApp" ng-cloak>
<div ng-view=""></div>
<body>
</html>
And here is a snippet of one of my routes:
<div class="section-b">
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-lg-3 col-lg-push-8 col-sm-12"><img alt="Alaska"
class="img-responsive intro-img" src=
"images/introduction_a.jpg"></div>
<div class="col-lg-6 col-lg-offset-1 col-lg-pull-3 col-sm-12">
<div class="clearfix"></div>
<p class="lead">Some text will go here</p>
</div>
</div>
</div>
</div>
In the screenshot below the white area is the text-area and that's an img-responsive, the default width of the page is meant to be the same size as the last image as it's set to 100%. Any suggestions? I'm hoping it's something really simple.
Related
I looked through the official Bootstrap grid layout page and there are many examples of alignment. I am looking forward to a class that will make the layout like
Every content of the first column will start with right alignment and every content of the second column will start with left alignment. If we use justify-content-center class then every content starts with the center. I know how to do it using CSS but I don't want to do this for every content.
Do you have any class that class will set every content in the right alignment?
I hope this is what you're looking for:
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md text-right">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
<div class="col-md">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
The objective it's to hide the red column on mobile and show it on higher resolutions but it just does not hide. Can somebody tell me what it's wrong with my code?, I pasted it in fiddle and works perfect but I take the same to my project and it does not work... What am I doing wrong? I'm using bootstrap 4.2.1
Fiddle
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="d-none d-md-block col-md-8" style="background-color: red; height: 100vh">
</div>
<div class="col-12 col-md-4" style="background-color: black; height: 100vh">
</div>
</div>
</div>
</body>
</html>
Chrome test(also proved on real phone with the same result)
Simply add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Into your <head>
A viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
(Source w3schools)
Try this code
<div className="row">
<div className="col-md-12 bg-danger d-none d-lg-block" style="height: 100vh">
</div>
<div className="col-12 col-md-12 bg-success d-lg-none" style="height: 100vh">
</div>
</div>
I have some troubles with my website template. Is it possible to shift div (or container) and leave the content aligned with other content on the page? I can do this with classic HTML + CSS but have some troubles with bootstrap.
See the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-xs-offset-2" style="background-color:lavender;">.col-sm-4</div>
<div class="col-xs-4" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
I have the following code
The image is shown properly at Chrome and Firefox but on the Internet Explorer the image seems huge. What adjustments should I do to see the same image size on every browser?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6">
<button data-toggle="modal" data-target="#maths_modal">
<figure>
<img src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" class="img-responsive">
<figcaption>Caption under my image</figcaption>
</figure>
</button>
</div>
</body>
</html>
(The error persists even without the figure element)
Common issue with Bootstrap 3 and IE11, try this in your css file:
.img-responsive {width: 100%;}
After some testing I found a workaround on this problem
Since in bootstrap <button> and <a> can both act the same, I replaced <button> with <a> and the compatibility issue was solved
Here is my bootstrap HTML code snippet. It is working fine in all browsers except in IE-11 . I am getting a horizontal scrollbar also the last 2 div col-xs-6 inside a row are coming in 2 different rows not in a single row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="javascript/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;"> direct inside a row
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
<div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
</div>
</div>
</body>
</html>
Thanks for the help in advance.
You can try to specify the compatibility mode in the document header with:
<meta http-equiv="X-UA-Compatible" content="IE=11" />
Take a look to this link for more info:
IE legacy document modes