I have the following issue.
I have a headline in a jumbotron with Boostrap. Now I want to dock a image centered to the bottom.
I tried some other ways shown on stackoverflow but nothing seems to work.
Here is the code: http://jsfiddle.net/S298j/3/
Code Issue:
<div class="jumbotron-main">
<h1>
HERE IS MY HEADLINE
</h1><br>
<h2>
HERE IS MY SUB HEADLINE
</h2>
<img src="imageskIsFb.png"/>
</div>
Try this:
Wrap your img in a container like so, with the class of "center-block".
<div class="center-block">
<img src="http://i.epvpimg.com/kIsFb.png" />
</div>
This will center align the img below the heading text.
Next add some custom styling. This code gets you close. Play with the dimensions.
.jumbotron-main img {
width: 100%;
max-width: 600px;
}
<html>
<title>test</title>
<head>
<!-- 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.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron-head {
background-color: #242729;
height: 80px;
margin: auto;
background-size: cover;
}
</style>
</head>
<body style="background-color: #C6491A;">
<div class="jumbotron-head">
<h1 class="text-center" style="font-size:80px;color:white;">Guild Hosting</h1>
</div>
<div class="container">
<h1 class="text-center"style="color:white;">HERE IS MY HEADLINE</h1>
<h2 class="text-center"style="color:white;">HERE IS MY SUB HEADLINE</h2>
<img src="http://i.epvpimg.com/kIsFb.png" style="padding-top:170px;padding-right:50px;" align="middle"/>
</div>
</body>
</html>
Related
I've been trying to get my rows and columns to appear over my background image. I've been struggling with this for a while. Any help would be greatly appreciated!
I am also quite new to this so, if it is simple I've yet to find it XD
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="about-us" class="">
<img src="https://via.placeholder.com/1920x618.png" alt="">
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
</html>
First you need to change Image path i have changed image path.
Give a backgroud-image to parent div in css.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
#about-us{
background-image: url('https://previews.123rf.com/images/melpomen/melpomen1904/melpomen190400312/120268255-e-learning-concept-with-person-using-a-laptop-on-a-white-table.jpg?fj=1');
}
</style>
</head>
<body>
<a href="https://placeholder.com">
<div id="about-us" class="p-5">
<div class="container-md">
<div class="row justify-content-center" style=" position: relative;">
<div class="col-4 text-light about-text-header">
First Column
</div>
<div class="col-4 text-light ">
Second Column
</div>
</div>
</div>
</div>
</a>
</body>
</html>
You can put image as background for your block using CSS. Inside your style.css file:
#about-us {
background-image: url('https://via.placeholder.com/1920x618.png');
}
There are also CSS properties to set background image position, size etc.
You can find more here
Edit: According to you comment if you want to achieve this design:
HTML:
<body>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="hero-img">
<img src="./yourimg.png" alt="">
</div>
<!-- About us section, with car in background -->
<div id="about-us">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
CSS:
#hero-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -50px;
}
#hero-img img{
object-fit: cover;
width: 100%
height: 600px;
}
#about-us{
background-image: url('./yourCarImage.png');
background-position: center;
background-size: cover;
/* probably padding needed */
padding: 100px 0;
}
This should work in general, adjust it for your needs.
I want to make a header where i have a logo positioned left and text next to that logo (on the right side of the logo) but i want the text to appear at the bottom of the image not at the top. How would i achieve that?
I tried with making the header div relative and the slogan div absolute but then the text is written over the image...
my html:
<html>
<head>
<title>test</title>
<!-- Latest compiled and minified CSS -->
<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.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container header">
<div class="logo">
<img src="images/logo.png" alt="Logo" class="img-responsive">
</div>
<div class="slogan">
Lorem ipsum lorem ipsum
</div>
</div>
</body>
</html>
and css:
body{
maring:0 auto;
}
.logo{
float:left;
}
.slogan{
float:left;
}
Here is a image of what i want to achieve:
If you wish for dynamic resizing let me suggest a flexbox alternative:
body {
margin: 0 auto;
}
.logo {
float: left;
}
.slogan {
/* float: left; */
align-self: flex-end;
}
.header {
display: flex;
flex-flow: row wrap;
}
<!-- Latest compiled and minified CSS -->
<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.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container header">
<div class="logo">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=100×100&w=100&h=100" alt="Logo" class="img-responsive">
</div>
<div class="slogan">
Lorem ipsum lorem ipsum
</div>
</div>
Easiest option is to give your slogan a top margin:
.slogan{
float:left;
margin-top: 4px;
}
my background image is not displaying at all and I can't debug it. I tried turning it into a ID, class, and so on but nothing works. Is there something I am obviously not seeing?
HTML code:
<title>Temple-Digital Designer</title>
<!--This links my bootstrap css file -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<!--This links my stylesheet from the css folder in portfolio-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--This links my jQuery file-->
<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script>
<div class="container-fluid header-section">
</div>
<div class="container-fluid what-i-do">
</div>
<div class="container-fluid about-me">
</div>
<div class="container-fluid contact-me">
</div>
<div class="container-fluid footer-section">
</div>
<!--Defines my javascript file(local made one) -->
<script type="text/javascript" src="./scripts/helper.js"></script>
</body>
My CSS code:
.header-section {
background-image: url('../img/pineapple.jpg');
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
Don't mind the jquery libraries, I was planning on using them later with bootstrap.
Check your path.
If path is true set background-size:cover.it may be true.
It seems, you have not set proper background path. I used online absolute path and it is working fine.
.header-section {
background-image:url('http://freedesignfile.com/upload/2014/07/Shiny-eco-style-green-background-vector-01.jpg');
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
<title>Temple-Digital Designer</title>
<!--This links my bootstrap css file -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<!--This links my stylesheet from the css folder in portfolio-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--This links my jQuery file-->
<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script>
<div class="container-fluid header-section">
</div>
<div class="container-fluid what-i-do">
</div>
<div class="container-fluid about-me">
</div>
<div class="container-fluid contact-me">
</div>
<div class="container-fluid footer-section">
</div>
<!--Defines my javascript file(local made one) -->
<script type="text/javascript" src="./scripts/helper.js"></script>
</body>
and you can see codepen link here
I am taking a class on web design, and I have an assignment to set up <div> tags to resemble the layout below:
I've learned the basics of HTML and CSS on Codeacademy, but I haven't used those skills in awhile. Here's what I have so far:
#banner {
width: 698px;
height: 71px;
background-color: #8B4789;
display: inline-block;
}
#button {
width: 306px;
height: 71px;
background-color: #ff7373;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>
</title>
</head>
<body background="Website comp.png">
<div id="banner"></div>
<div id="button"></div>
</body>
</html>
Unfortunately, I'm a bit lost at this point, and from what I've researched, the advice I've gotten have given me mixed solutions that don't necessarily work well with each other.
How can I fix my code so as to resemble the given layout?
A very simple solution is to split the divs in parts of 100%. and set the height of all the top divs to the same height.
#banner{
width:30%;
height:30px;
float:left;
}
do the same for, home (15%), about me (15%), career (15%) and schooling(15%).
After that do the same for the second line. I suggest you to make aparent div for main-topic and text.
The platform bootstrap splits the screen into 12 columns for easy layout, and provides pre-built classes for stuff like nav-bar and jumbo-tron.
You just link bootstrap with cdn:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
in your head and your body looks something like this:
<div id = navbar>
<div class = "row col-xs-12">
<div class = col-xs-3>
Banner
</div>
<div class = col-xs-3>
Home
</div>
<div class = col-xs-3>
AboutMe
</div>
<div class = col-xs-3>
career
</div>
<div class = col-xs-3>
Schooling
</div>
</div>
<div class = "row col-xs-12">
<div class = "col-xs-2">
<div>
<a>mainoTopic</a>
</div>
<div>
<a>Text</a>
</div>
</div>
<div class = "col-xs-8">
<div>
<a>Picture</a>
</div>
</div>
<div class = "col-xs-2">
<div>
<a>Explaining</a>
</div>
</div>
</div>
</div>
I am trying to make the icon, text and button sit in the center of the div vertically.
So, tried to use bootstrap class well, but still not working. Could someone help me on that?
Here is the image to reference:
Css part:
.brl-icon-size { font-size: 2.5em; }
Here is all my code:
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
Sidebar
</div>
<div class="col-md-10 col-md-offset-2 content">
<div class="well well-lg">
<span class="glyphicon glyphicon-file brl-icon-size"></span>
<span>New Message</span>
<div class="pull-right">
Save draft
<button>Publish</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.valign-top {
vertical-align:top;
}
HTML:
<div class="pull-right">
<span class="valign-top">Save draft</span>
<button>Publish</button>
</div>
Online Demo 1
EDIT 1:
In case you use different font-size properties on aligned elements, then you should specify line-height property.
Online Demo 2
EDIT 2:
It's easier and more correct to just wrap you icon into small tag:
<small></small>
Or simply using custom modifier class:
.icon-any-size {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}