how to make bootstrap icon text and button vertical center in div - html

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

Related

Move text onto Image CSS/Bootstrap5

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.

align-items in 'row' do not work when i use a custom class in container-fluid in bootstarp 4?

I just started learning front end development and after studying basics of html5/css3, moved on to bootstrap 4. Now, O have been trying to make a copy of facebook login page, and used container-fluid for 100% width and then used container and row and column inside it. To match the background color, i added a custom class to container-fluid and then to align items vertically, i used align-items-end in row. But, for some reason, it does not work; I had been looking into it but couldn't find anything. Then, I tried something which let it happen. below is the code of both the cases, kindly help me understand what is going on and why it didn't work before and now why is it working? Help is appreciated. Thanks.
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style>
.bg-fakebook {
background-color: #3b5999 !important;
min-height: 82px;
}
.fakebook-weight {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
</style>
<!-- Title -->
<title>fakebook</title>
</head>
<body>
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
output
Then, after trying many things, i added bg-fakebook to row as well which worked.
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end bg-fakebook">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
ouput
if you want to align middle first you have to display: flex the parent. Than add the alignment top center or bottom. like this
<div class="container-fluid bg-fakebook d-flex align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
To learn bootstrap 4 you must learn flex first. BTW Happy Learning.

Space left in bootstrap

The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.

MDC: How to center a cell?

It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.

Really need help on div tags

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>