I'm making a header with Bootstrap. My page-header contains an image and text. I want the text to be vertically centered in the header. It seems like an easy, fix, but I'm running into trouble. I made a custom class called v-align where I set the vertical-alignment: middle;, but it's not working. Any suggestions?
Image:
HTML:
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<div class="row">
<img class="col-xs-4"src="Popcorn.png" width="100" height="auto" >
<div class="col-xs-8 v-align">
<h2>Sparky's Movie Theater</h2>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Css Class:
.v-align {
height: 100%;
display:table-cell;
vertical-align: middle;
}
I was able to get my text to be vertically aligned by adding the following to my css code:
CSS:
#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
HTML:
<div class="col-xs-8" id="box">
<h2 id="spantext">Sparky's Movie Theater</h2>
</div>
Remove the padding and margin in <H2>
h2{
margin:0;
padding:0;
}
Related
I am making a webpage in HTML and CSS which have to be replicated exactly like this image.
At this moment, I am able to get this in fiddle.
The problem with the fiddle is: it (text and a rectangle(with some text)) is getting aligned at the left-side and right-side center of page whereas I want to bring them at the center of a page (with some distance between the two) as shown in the image. The HTML code which I am using is:
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer Qualifications Go here</div>
</div>
</div>
I am wondering whether do I need to .col-lg-6 class as I have used above to replicate an image ?
If not then do I need to use col-lg-offset-1 in my HTML code in order to replicate an image ?
At least for the size of screen that you're doing it col-lg you can get it to work by using justify-content-center in the wrapping <div>. What this does is that it moves the empty space to the sides of both elements, bring in them together to the center. I used col-lg-4 in my case, but if that is too small for you you can adjust it to your needs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="sections">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 left-side"> Development & Design</div>
<div class="col-lg-3 right-side">
Web Designer
<!-- list requested in the comments Here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
You can find more info on Bootstrap Doc
Run this below Snippet :
.sections{
width: 100%;
}
.sections .row {
padding-top: 100px;
}
.sections .left-side {
font-style: italic;
float:left;
width:45%;
}
.sections .right-side {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
max-width: 320px !important;
height: 100px;
font-style: italic;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 10px;
float: right;
width:50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Homesail</title>
<link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer
<ul>
<a href=''><li>Qualification</li></a>
<a href=''><li>Go here</li></a>
</ul></div>
</div>
</div>
</div>
</body>
</html>
In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>
I have a text inside a col, and i would like to know how can i put this text in the middle of the col.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 ">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>
try this.
In the class row add style="text-align: center"
Then change class="col-xs-2", class="col-xs-7",class="col-xs-3"
to class="col-xs-12"
Perfile
You can use bootstrap class text-center to center your element in the column
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 text-center">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>
Bootstrap. How to align vertically the contents of the menu
I have four solutions. The first of these requires that images were the same height. In three others the images may differ in height.
1. line-height
You can set a property line-height for the text. line-height must be equal to the height of images. It is suitable when the text occupies one line and images have the same height.
.put-in-the-middle {
line-height: 80px; /* = height of the picture.png */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="pull-left"><img src="http://placehold.it/80x80/69c/fff/" alt="Menu"></div>
<div class="pull-right"><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
<div class="put-in-the-middle text-center">Perfile</div>
</div>
</div>
2. table-cell
You can transform blocks in table cells. Then apply vertical-align: middle; to them.
.transform-in-a-table {
display: table;
}
.transform-in-a-table div {
display: table-cell !important;
vertical-align: middle;
}
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row transform-in-a-table">
<div><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></div>
<div class="make-it-wide text-center">Perfile</div>
<div><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
</div>
</div>
3. HTML table
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<table>
<tr>
<td><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></td>
<td class="make-it-wide text-center">Perfile</td>
<td><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></td>
</tr>
</table>
4. inline-block + text-align-last
You can use the idea from vertical-align with Bootstrap 3 with property text-align-last.
.vertical-middle {
text-align-last: justify;
}
.vertical-middle > div,
.vertical-middle > img {
display: inline-block;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vertical-middle">
<img src="http://placehold.it/80x40/c69/fff/" alt="Menu">
<div>Perfile</div>
<img src="http://placehold.it/120x80/9c6/fff/" alt="Menu">
</div>
</div>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
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">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I'm having trouble vertically centering both my text id="WhatIsMasterRow" and image id="WhatIsMasterPhoto. I've tried wrapping it in a .container and using the bootstrap center-block, as well as some other centering classes.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- What is Master Page -->
<div class="row" id="WhatIsMasterRow">
<div class="col-md-6" id="WhatIsMasterText">
<div class="row-text", id="SubHeaderTextLeft"> What is a Master? </div>
<div class="row-text", id="RegularTextLeft"> Test Text </div>
</div>
<div class="col-md-2 col-md-offset-2 center-text">
<img id="WhatIsMasterPhoto" src="Resources/Images/Peter-Limmer-boots-2.jpg">
</div>
</div>
</body>
I've tried using margin: 0 auto; as well, but it's not working.
.col-md-2 {
margin: 0 auto;
background-color: black;
}