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;
}
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'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>
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 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 */
}
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>