I am trying to send html email with bootstrap navbar.
When I view the received mail in my mobile device, I can see the navbar and the html is properly rendered.
But when I view the same received mail in desktop, I cannot see the navbar. My navbar title is superimposed by my h3 element which is under the navbar.
Is there any configuration that I need to do?
To make it clear, I am seeing it properly using iPhone's email app. But when I view the yahoo mail in my desktop, it's not showing the navbar bar itself. The navbar title is written on top of the h3 element that supposed to be below the navbar.
Here's the code:
<html lang="en">
<head>
<base href="/"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Brand Name</span>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h3>Hi,</h3>
<br>
<p>Thank you for your email.</p>
</div>
</div>
</body>
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<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">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<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-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
I'm trying to create a base HTML file in Django that pretty much is the one responsible for the rest of the pages to inherit a template but the navbar doesn't seem to work. Anyone knows if there is a known issue from Bootstrap or am I doing something horribly wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="navbar-brand">BRAND</li>
<li class="navbar-link">Admin</li>
<li class="navbar-link">Other</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Welcome to Index</h1>
<h2>This is index.html page showing!</h2>
</div>
</div>
</body>
</html>
I created a navigation bar inside the class jumbotron using bootstrap. But it seems that there is some problem with the navigation bar menu. There is no padding or styles in the "li" tags. All the li tags just sticked together in the following manner:
HOMEPRICEGALLERYMEDIAFAQsCONTACT US
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">here comes the image</img>
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</body>
you forgot to add a tags to your li tags. this a tag is responsible for the padding--
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</body>
</body>
If you wrap the text inside the list items in anchor tags, you would see it styled :) Let me know if it works
<ul class="nav navbar-nav">
<li><a href='#'>HOME </a></li>
<li><a href='#'>PRICE </a></li>
<li><a href='#'>GALLERY </a></li>
<li><a href='#'>MEDIA </a></li>
<li><a href='#'>FAQs </a></li>
<li><a href='#'>CONTACT US </a></li>
</ul>
I have created a simple project (Hybrid with Dojo) that contains one view with three pages - all created using the Dojo Mobile View wizard.
After I build all and deploy, and preview with the Worklight Console, the view doesn't render the arrows of the list items properly and once a list item is clicked, it looks like the new page opens on top of the view, instead of transitioning.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld2App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HelloWorld2App.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Heading'"></div>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 1',moveTo:'page1'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 2',moveTo:'page2'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 3',moveTo:'page3'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 1',back:'Back',moveTo:'view1'"></div>On page 1
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page2">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 2',back:'Back',moveTo:'view1'"></div>On page 2
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page3">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 3',back:'Back',moveTo:'view1'"></div>On page 3
</div>
<script src="js/initOptions.js"></script>
<script src="js/HelloWorld2App.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Since Virginie is not copying the answer from the comments, here is answer for all to know:
The above did not work while using the internal browser in Eclipse. After moving to use an external browser this is now working.