I have the following page which is displayed correctly with the TOP BAR taking the entire top space and the 3 other divs displaying next to each other below it.
However on Chrome it stacks everything on top of each other no matter what size the browser is. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<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>Whatever</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<h1>Hello!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12">
TOP BAR
</div>
</div>
<div class="row">
<div class="col-sm-4">
I am left
</div>
<div class="col-sm-4">
I am center
</div>
<div class="col-sm-4">
I am right
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
In order to reproduce this please link to the bootstrap files using the integrity constraint.
Thanks to Jdsfighter's comment after opening the console I saw the following errors:
Failed to find a valid digest in the 'integrity' attribute for
resource
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
with computed SHA-256 integrity
'7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw='. The resource has been
blocked.
Failed to find a valid digest in the 'integrity' attribute for
resource
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'
with computed SHA-256 integrity
'KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo='. The resource has been
blocked.
For some reason the integrity check did not work on my instance of Chrome and as the result I had to remove them.
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>
This question already has answers here:
Remove Microsoft Edge's phone number styling
(4 answers)
Closed 3 years ago.
I have a relatively simple bit of markup on the header of a website I'm redesigning and it seems to display fine on browers I've tried but a rather odd thing happens in Edge (on Windows 10): the phone number in the header shows up underlined, as if it is a link, and when I click on it, it asks if I want to open Zoom. I know Zoom is a videoconferencing app but I don't even have it on my laptop where I am displaying this website so I'm not sure why it wants to offer to take me into Zoom. I just want to display a phone number and make it stand out a bit by colouring it differently than the surrounding text!
Here is a JSFiddle that shows my HTML and CSS (inline). And here's the code from the JSFiddle:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#phoneno {
color: aqua
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="page-content">
<div id="header">
<div class="row">
<div class="col-sm" id="Jones Chiropractic">JONES CHIROPRACTIC</div>
<div class="col-sm text-right" id="Doctor">Dr. Fred Jones</div>
<div class="col-sm ml-auto text-right" id="JonesContact">
123 Main St. W.<br> St. Louis, MO<br> Phone <span id="phoneno">(555) 555-5555</span><br> Fax (555) 555-5556 <br> joneschiropractic#gmail.com
</div>
</div>
<!-- row -->
</div>
<!-- header -->
</div>
</div>
</body>
</html>
Why does Edge underline the (first) phone number (but not the fax number) and why does it want to open Zoom? How do I make it just display it without the underline and persuade the browser not try to launch Zoom?
You should be able to override this if you put the following in the head section for your page:
<meta name="format-detection" content="telephone=no">
This page has more information on this.
Hi im kind of new to coding, but eager to learn, im trying to make a new website from scratch and wanted to set up a picture on the left and then next to it on the right something like this...This is the closest i could find.
i can get the image on the left and the icons and text on the right, just not the text to the right of the icons... and cant seem to find any examples. If someone could give me a hand i would be very appreciated.
https://www.w3schools.com/css/css_float.asp
I think this is what you want. In other words, just add text and img link in the html and in css style sheet, use float: left and padding.
Is this what you are trying to implement ? Lookup Bootstrap grid for more help https://getbootstrap.com/docs/3.4/css/
Also you can show your code to make your question more clear.
<!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.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap grid system</h1>
<p>select from 12</p>
<br>
<div class="row">
<div class="col-md-4">
<img src="img.png" class="img-responsive">
</div>
<div class="col-md-8">
GG
<h1>GLHF</h1>
</div>
</div>
</div>
</body>
</html>
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.
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...