I'm trying to set up a new internal web page using bootstrap (both versions 3.3.6 and 4.0.0-alpha.6) columns, but for some reason they don't show up in Internet Explorer 11 (company-mandated). Instead of columns, the text is stacked vertically (see examples).
I have tried everything from complex code to the simple code I have attached to this question. Nothing has worked. I have also looked at every single web page I could find on this, and likewise nothing has worked. I have also tried using xs, sm, md, lg and xl column sizes, and they don't make any difference.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<title>Test 4</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">lg-4</div>
<div class="col-lg-4">lg-4</div>
</div>
<div class="row">
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">variable</div>
<div class="col-3">variable</div>
<div class="col-3">variable</div>
</div>
</div>
The above code results in:
lg-4
lg-4
lg-3
lg-3
lg-3
variable
variable
variable
Instead of:
lg-4 lg-4 lg-3 lg-3 lg-3
variable variable variable
Bootstrap Grid System allows 12 columns across a page.
In order to avoid using all the 12 columns individually we can split the columns into sub columns as per our requirements.
However we need to ensure that the sub columns always sums up to 12 and never exceed 12 or else the content switches on to the next line.
So perform appropriate changes in your code as per the above concept and apart from that to support the grid system in IE 11 consider including the following tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
In order to have further knowledge about grid system visit the following link :
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Boy, is my face red ...
I closed the browser, cleared the cache, and went back in ... and it worked fine.
Live and learn ... sorry for the wasted time ...
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">Column 1-a</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
</div>
</div>
Related
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
When I view this site in Chrome and use dev tools to view mobile site it correctly shows as 1 column but when viewed from iPhone still 2 columns?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body class="h-full font-proza">
<div class="container mx-auto flex justify-center">
<div class="w-2/3">
<!-- Two columns -->
<div class="flex mb-4 flex-wrap md:flex-no-wrap">
<div class="w-full md:w-1/2 md:mr-10 mr-0">
Left Text
</div>
<div class="w-full md:w-1/2 mt-10 md:mt-0">
Some Text
</div>
</div>
</div>
</div>
</body>
</html>
Add the meta tag in your HTML.
A 'meta' 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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This question already has answers here:
Is it necessary to write HEAD, BODY and HTML tags?
(6 answers)
Closed 4 years ago.
I have a code snippet which goes as follows:
<html>
<head>
<script></script>
<div class="container">
<div class="jumbotron">
<p>Hello I am Dikshit</p>
<ul><li class="">Hello</li>
<li> India</li>
</ul>
</div></div>
</head>
<body>
<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>
Hello Lorem popum
<p> Demo text</p>
</body>
</html>
How does this even work? What is the difference between head and body tags?
Please find here the output attachment.
The head tag is supposed to be used for information for including resources/information for the browser/search engines, so stuff like CSS links and scripts and meta tags.
If you add a div or any other visible HTML element, most browsers will still show it, but it's not technically valid and is advised against -- just put visible content in the body.
The reason why it works is that the browser knows what you wanted to do. But you might have troubles when you host it in an external server.
Tags help you structure your page. If a robot crawls your web, it knows to look for tags that define your webpage in the head, and for the content that is defined in the body.
All I am trying to do is to get some text to begin in the middle of the screen.
Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p> and it didn't make the text large.
NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="span3 offset9">
<p class="large">This Text</p>
</div>
</div>
<h1>Hello, world!</h1>
</body>
</html>
in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is
<body>
<div class="row">
<div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>
and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.
On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/
Update
Since you use Bootstrap 3 now, you have to change the markup a bit.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test loc</p>
</div>
fiddle
bootstrap docu
You forgot to import the javascript part of bootstrap.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
ASP.NET MVC4 only showing #RenderBody content on IIS7
Setup: I've got a VM running Windows 7 upon which I've installed IIS7, MVC3 & MVC4 with Web Platform Installer. I've added a new website in IIS using a .NET 4.0 application pool, and then used the Visual Studio 2012 publish option to publish an MVC4 web app to the website's root directory.
The problem is that the only output I am getting is whatever is in the individual views. There is no layout, nothing other than the #RenderBody content.
It works fine when I preview it with Visual Studio.
This is my _Layout.cshtml:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- this is decorative -->
<div class="topbar"></div>
<div class="row header">
<div class="five columns logo">
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/logo.png")">
</a>
</div>
<div class="seven columns nav">
#Html.Partial("_TopNavigationPartial")
</div>
</div>
#RenderBody()
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<div class="row footer">
<div class="six columns copyright">© 2013 snip.</div>
<div class="six columns nav">
#Html.Partial("_BottomNavigationPartial")
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
All that will be output though is what is in the view, e.g:
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<h1>Home</h1>
<p>You are here: Home/Index</p>
</div>
</div>
</div>
Anyone have any idea why this might be so?
It's probably just that I haven't set up IIS7 right.
Edit: I just uploaded the Internet application and it has done the exact same thing. Only the view content is being output. So it's definitely something in IIS.
Edit 2: I have set up an Internet application as an application in IIS but still it returns the view content only. Weird.
Edit 3: Got it working, not sure how. http://i.imgur.com/ZpKb4P5.gif
Managed to fix this. Not sure exactly what was the problem, but I was making a new website and then dragging the published files into it, which wasn't working.
I then added an application to the default website, which worked, but then I found this post which explained that the default website itself is an application.
So in the end I just copied the published files into the default root directory and it worked.