I have a jumbotron bootstrap width that covers the whole page. I want to implement a style where it doesn't covers the whole page. Is there any attribute I can apply that I can adjust the width?
/* style -- this is the stylesheet */
.jumbotron {
font-size: 17px;
cursor: pointer;
width: 5px;
}
.mycustom-jumbotron {
border:10px solid #003366;
width: 300px;
margin: 0 auto
}
<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>
<div class="jumbotron mycustom-jumbotron text-center">
<h1>Bootstrap</h1>
<p>Bootstrap Web Design</p>
</div>
.jumbotron-test {
font-size: 17px;
cursor: pointer;
width: 50%;
text-align:Center;
}
<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>
<div class="jumbotron jumbotron-test">
<h1>Jumbotron</h1>
<p>Testing Jumbo tron</p>
</div>
Related
How can I make a card like this with css or bootsrap?
It is better to show your work than to search for answers to copy and paste here.
The below example below does not take responsive design into account, using bootstrap-4.
You can take it as reference and check the meaning of different class like ml-3, shadow from Bootstrap
<!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=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<style>
.diagonal-left {
width: 100px;
height: 100px;
background-color: #deadee;
transform: skewX(30deg);
transform-origin: top;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.diagonal {
width: 350px;
height: 100px;
background-color: #319b9e;
transform: skewX(30deg);
transform-origin: top;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.diagonal>span {
transform: skewX(-30deg);
color: white;
}
</style>
<body>
<div class="ml-3 row">
<div class="diagonal-left shadow"></div>
<div class="diagonal shadow"><span>Title<br>123</span></div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->
</body>
</html>
You can simply use transform:skew();
here is an exapmle.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallelogram {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
</style>
</head>
<body>
<h2>Parallelogram CSS</h2>
<div class="parallelogram"></div>
</body>
</html>
;
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I am new to Web development and trying to create a basic avatar using HTML/CSS.
I created a style.css file, an avatar.css file and an index.html.
Everything works fine until I set the .avatar CSS class. I want to use it to round the corners of my image. But after I set the img class to "avatar", the images stay square while I should have 2 rounded images, one of 50x50ph and the other of 30*30 (one being set to the class avatar and the other on the class avatar-small).
Here is what the page looks like:
Here is my code
CSS style
/* --- Google Fonts--- */
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet")
/* --- Components Design--- */
#import "avatar.css";
/*#import url("components/button.css");*/
/*#import url("components/dropdown.css");*/
/*#import url("components/card.css");*/
/*#import url("components/badge.css");*/
/*#import url("components/banner.css");*/
/*#import url("components/tabs.css");*/
/*#import url("components/list.css");*/
/* --- Fonts--- */
body {
font-family: "Open Sans", "Helvetica", "sans-serif"
}
h1, h2, h3 {
font-family: "Montserrat", "sans-serif"
}
CSS avatar
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='style.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/73fba8f7d3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Web Components</title>
</head>
<body>
<div class="container">
<h1 class="text-center">UI components sprint</h1>
<h2>Avatar design</h2>
<img src="https://via.placeholder.com/50" alt="" class="avatar">
<img src="https://via.placeholder.com/50" alt="" class="avatar-small">
</div>
<!-- jQuery & Bootstrap JS for dynamic Bootstrap components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I really can't understand what's wrong here. I tried finding the answer on my own but didn't manage to...
Thank you for your help.
If you have linked the url of your image, and put border-radius: 50% properly, you should get the result.
What I find is that you've linked style.css 2 times, and missed out avatar.css external link file. If its typo, then fix it. Otherwise, you should get the result.
img {margin: 20px;}
#img1 {border-radius: 10px;}
#img2 {border-radius: 30px;}
#img3 {border-radius: 50%;}
<img id="img1" src="https://picsum.photos/200/300" />
<img id="img2" src="https://picsum.photos/200/300" />
<img id="img3" src="https://picsum.photos/200/300" />
First, check your developer tools to see if the file is loaded. if both files are in the same hierarchy level, it should be fine as your code seems to work.
Your CSS code misses some ";" at every rule, which might be the reason they're not applied. the fix should look like this:
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
I hope it works, and happy coding :)
I am trying to make a site, using a background image:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
and I also have on the top of the page this:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).
I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result.
How can I make the pageTitle bigger without altering my background image's size?
What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.
Code Snippet:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too.. what you can do is set
html, body{
height:100%;
}
and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).
There's an article, which describes the exact problem, that you have.
One of the solutions is to provide the following attribute to body. This will ensure everywhere is covered:
body {
...
background-size: cover;
}
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
html, body {
height: 100%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: cover;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}