<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
Related
I think I looked everywhere and tried everything.
I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other.
HTML code:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
Any reason why? Thanks in advance.
The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.
Please make sure that you have the following included in the section of your document.
<head>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen example: https://codepen.io/CapySloth/pen/gRGNxa
Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<img src="img/instagram.png"/>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<img src="img/facebook.png"/>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png"/>
</div>
</div>
</div>
</div>
1st:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
Should be
<img src="img/instagram.png">
For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))
3rd: could be your reference not setup properly. try those:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<img src="img/instagram.png">
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<img src="img/facebook.png">
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png">
</div>
</div>
</div>
</div>
My HTML file is :-
<!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">
<title>Kitty Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive" alt="Logo">
</div>
<div class="col-md-6 text-uppercase text-right">
<h1 class="super-text">Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Sunflower</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Bokeh</h3>
<p>Link to project</p>
</div>
</div>
</div>
</body>
</html>
And my css file is :-
.super-text {
font-size: 60px;
font-weight: 200;
}
body {
font-family: 'Lato', sans-serif;
color: #747704;
font-weight: 100;
}
Now, When I open the html file in a browser. The font style and color makes it but the font-weight is nor affecting the any text on the screen. I tried mozilla firefox, chrome and internet explorer and none of these browsers do any good. Does anyone know where my problem might be lying.
change font-eight in your CSS to 700px
i didn't encounter any problem with none of these 3 browsers but i got better results with
font-size: 60pt;
instead of using px in css file for size.
For font-weight don't use numbers, valid values are ;
normal|lighter|bold|bolder|value|initial| inherit
I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container
The following is the code:-
<!DOCTYPE html>
<html>
<head>
<title>Home page </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="containe-fluid">
<div class="row" >
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU<br>$229.00
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core<br> $269.00
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am unable to put the diffent products in one line and it is coming one below the other
Please help me am a newbie and am caught up.
Avoid the use of inline width: 25% for the col-x-* classes. Also for supporting mobile width, Add col-xs-6.
col-xs- has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizes post. To save you some reading, the main bits of interest are:
.col-xs-: Phones (<768px)
.col-sm-: Tablets (≥768px)
.col-md-: Desktops (≥992px)
.col-lg-: Desktops (≥1200px)
To add offset, use col-md-offset-4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core
<br>$269.00
</p>
</div>
</div>
</div>
</div>
Plz add Bootstrap link to the page in the head section
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Also, remove width=25% from the columns
also, change
<div class="containe-fluid">
to
<div class="container-fluid">
Stop using width:25% . The cause is when you use inline style it gets top priority on loading in html view page . And thus the whole bootstrap and inline style gets messed up .
Hope this will help your project get finished faster .
Please make sure that you load bootstrap in your html file.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Home page </title>
</head>
I have tested your code with bootstrap css and it's working like it should.
I have just started learning front-end web development. I was working on my portfolio mockup and I am having issues with image sizing. I am using bootstrap framework. When i use an image with img-responsive class, the height and width of the image I upload are set automatically. Since I wanted to set the height myself, I changed the height of the image (in css file). However, now when i reduce my browser's width in order to see how my portfolio will look when in mobile view, the width resizes but the height remains the same. This makes the image look disproportional. How can i fix this? If I don't use custom height, everything is fine in mobile view.
this worked for me in my google chrome browser. As far as the mobile view and other devices this meta tag helps "meta name="viewport" content="width=device-width, initial-scale=1.0" (refer to the meta tag in my html head element)
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>
I'm pretty new with Bootstrap and have stumbled upon an issue:
Here's the HTML of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Watch The Shawshank Redemption</title>
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE#._V1_SX214_.jpg" />
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<h2 class="pagination-centered">The Shawshank Redemption</h2>
<p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
<div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
<div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//vjs.zencdn.net/4.1/video.js"></script>
<script src="/Scripts/initializers/initializer.js"></script>
</body>
</html>
However for some reason the text is being placed partly on the image as shown in the image below:
Why is the text being placed over the image?
I thought I gave the image 3 columns and the text 9 columns of the row so I don't see how they get into each other.
Give the image a class of img-responsive. It's just a case of the image being too wide.