The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.
Sorry that my style sheet can't connect to this website.
My nav-bar looks like
this
but it should look like
this
I truly hope you can help me get out of this mess!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<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>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.
You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.
Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.
Edit your navbar-header HTML so it looks like this:
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="https://placeholdit.co//i/555x150"></a>
</div>
Add the following rule to your CSS:
.navbar-brand {
padding: 10px;
}
The problem was the unnecessary styling that bootstrap applies.
So
You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.
I made a somewhat close to what you need demo, take it from there to your desired design.
* {
font-family: 'Oxygen', sans-serif;
margin:0;padding:0;
}
header{
height: 100px;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}
#logo-img {
background: url('4.png') no-repeat;
display:inline-block;
width:80px;
border:1px solid;
height: 80px;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<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>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
Related
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Hi, I'm new to learning html, css and bootstrap. I came across that a particular tag would not appear. It turns out the link I was using to receive the bootstrap CSS was the problem.
I've tried: Changing the css properties of the hr to different colours (still wouldn't show). The problem gets isolated to the link for bootstrap. The unusual thing is that it doesn't work with the second link being bootstrap 5.0.2, but it works with the first link bootstrap 4.3.1.
I've also tried to mark the css properties as !important on my own stylesheet placed beneath the bootstrap css.
Thank you for the help ^_^.
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--
h-100 means you want the container to span the entire height of page
Hence, you can get the the items aligned within the container at its center.
-->
<div class="container d-flex align-items-center h-100">
<div class="row">
<!--
Use col-12 since bootstrap grid system has 12 slots per row
using col-12, ensures your div spans the entire row.
-->
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<div class="buffer col-12"></div>
<section class="text-center col-12">
<hr>
<a href="https://mailchi.mp/b24dbfe7c665/kimchilettuce">
<button class="btn btn-primary btn-xl">Find out more</button>
</a>
</section>
</div>
</div>
</body>
</html>
Below is my css file
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
color: #e2dbdb;
font-size: 3rem;
}
hr {
border-color: #F05F44;
border-width: 3px;
max-width: 75px;
}
.buffer {
height: 10rem;
}
.btn {
font-weight: 700; /*This is different from font size. This specifies how thick the words are*/
border-radius: 300px;
text-transform: uppercase;
}
.btn-primary {
background-color: #F05F44;
border-color: #F05F44;
}
.btn-primary:hover {
background-color: #ee4b08;
border-color: #ee4b08;
border-width: 4px;
}
.btn-xl {
padding: 1rem 2rem;
}
When using bootstrap css 4.3.1
When using boostrap css 5.0.2
This works fine for me
Please share your body part of the webpage. The error might be there.
h1 {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
</body>
</html>
Hope this helps!
im making a website from scratch for the first time, i am formally educated on html but not css
pls explain heres my html
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
heres my css
.header {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
}
someone please explain how to get the effect i want this is what it looks like
ss of my page
You need to set the style to .logo, not .header
.logo {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
margin: 0;
}
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
Please remove padding on button.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).
I'm totally new to Bootstrap.
I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.
I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.
Can anyone advise me on this.
here is a fiddle for my code
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
}
.brand-text{
font-size: 2em;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag
.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
There are multiple ways for vertical alignment.
You can do by giving position absolute, make the parent div position relative.
Here is the Code:-
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
position:relative;
}
.banner-logo a
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.brand-text{
font-size: 2em;
color: white;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<!-- 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help
.banner-logo{
background-color: red;
padding: 10px 0;
}
a.brand-text{
text-decoration: none;
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
Webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
</body>
</html>
The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>