I'm creating a simple web page that will have three large buttons that should fill the entire page (ie, they span the width of the page, and should take up 33.3% of the height for each.) I have the width part working, but I am unsure how to get the heights part working. This is my code so far.
<html>
<link rel="stylesheet" href="./bootstrap.min.css"/>
<link rel="stylesheet" href="./bootstrap-theme.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif">
<div class="col-md-4">
<i class = "fa fa-search fa-3x"></i>  <h1>Catalogue Search</h1>
</div>
<div class="col-md-4">
<i class = "fa fa-sign-in fa-3x"></i>  <h1>Library Account Login</h1></button>
</div>
<div class="col-md-4">
<i class = "fa fa-map-marker fa-3x"></i>  <h1>Hours and Locations</h1></button>
</div>
</span>
</div>
</div>
</div>
</html>
The following fiddle link may solve your problem.
Codes are as follows:
HTML:
<div class="container-fluid">
<div class="row">
<button id="catalogSearch" class="btn btn-default">Catalogue Search </button>
</div>
<br/><br/>
<div class="row">
<button type="button" id = "AccountLogin" class="btn btn-default">Library Account Login</button>
</div>
<br/><br/>
<div class="row">
<button id ="hrsLocations" class="btn btn-default btn-lg"> Hours and Locations</button>
</div>
</div>
CSS:
.btn
{
width:100%;
padding: 12%;
}
JavsScript
document.getElementById("catalogSearch").onclick = function () {
location.href = "https://encore.mpl.on.ca/iii/mobile/homepage?lang=eng";
};
document.getElementById("AccountLogin").onclick = function () {
location.href = "https://encore.mpl.on.ca/iii/mobile/homepage/Sdologin?lang=eng&loginReason=doDefault";
};
document.getElementById("hrsLocations").onclick = function () {
location.href = "http://www.mpl.on.ca/hours.php";
};
You haven't specified whether you are using Bootstrap v3 or v4.
You should only be using .col-*-* as children of .row elements or any other elements with a default margin: 0 -15px (such as .form-groups).
You are using .col-*-4 when you don't want your element to be 1/3 of their parent width.
You're using 3 <h1> tags on the same page, which is a very big no-no SEO-wise.
Probably the easiest way to achieve what you want, using Bootstrap v3 (which is what I assume you're using), would be using a .btn-block combined with flexbox. Please also note I've made significant changes to markup (yours is invalid).
body {
margin: 0;
}
div.jumbotron {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
min-height: 100vh;
margin-bottom: 0;
}
.jumbotron > .btn-block {
display: flex;
flex-direction: column;
min-height: calc(100vh - 60px);
align-items: stretch;
}
.jumbotron > .btn-block > .btn {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media (min-width: 768px) {
.jumbotron > .btn-block {
min-height: calc(100vh - 120px);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<div class="btn-group-vertical btn-group btn-block">
<i class = "fa fa-search fa-3x"></i><h1>Catalogue Search</h1>
<i class = "fa fa-sign-in fa-3x"></i><h1>Library Account Login</h1>
<i class = "fa fa-map-marker fa-3x"></i><h1>Hours and Locations</h1>
</div>
</div>
</div>
</div>
Don't forget to autoprefix
Try this without bootstrap :)
// this will call the button and design
.button {
background-color: gray;
color: #FFFFFF;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:10px
}
// this will assign sizes of the button you want
.btnbig {
width: 99%;
height: 500px;
}
//btnbig is the class of your button you want to modify
<div class="button btnbig">A big button</div>
is this clear now ? im sorry (Im newbie)
If I understand the question correctly then you can use CSS calc to set the height as a percentage of the page.
.btn-block {
display: block;
width: 100%;
height: calc(100vh/3);
}
Related
JS: http://jsfiddle.net/1cmtpnha/
I have this:
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
padding_5 just contains padding css
card-body is bootstrap 4
I tried this:
[class*="icon-"] {
display: inline-block;
width: 100%;
}
.icon-center i {
text-align: center;
}
and this:
.icon-center {
margin: auto;
display: block;
}
and neither worked. Those were top checked responses i saw on SO.
What is wrong with my code?
I want it to be horizontally centered within a card-body.
It's not the bootstrap either. I tested it on a separate page with no css or card-body. Still same issue.
You have three options here
1. Parent: text-align: center
set text-align: center to body.
2. Child: display: block and text-align: center
set display: block to .icon-center.
3. Child display: block , set width and margin: auto
set display: block , width: 20px and margin: auto to .icon-center.
https://codepen.io/blackcityhenry/pen/WPexKp
.icon-center {
text-align:center;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
Just add text-align: center; to the parent card-body
.card-body{
border: 1px solid red;
text-align: center;
}
.padding_5 {
padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
I learned recently that CSS properties can be overridden if another selector contains more specificity. The problem however is that I was only applying one property, the font color, to the body of my page, yet it still does not register.
The basis of my issue lies in the fact that I cannot find any characteristic of my CSS code that would somehow override the font color I have applied to the body. Here is my code:
body {
background: url(https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6726719ee78dabe78033950d9f3f7145&auto=format&fit=crop&w=1650&q=80);
background-size: cover;
background-position: center;
font-family: 'Exo';
color: white;
}
#content {
text-align: center;
padding-top: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Student Union for Purposeful Education</h1>
<h3>Learning <em>by</em> students, <em>for</em> students.</h3>
<hr>
<button class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
Is there some specifier that's overriding the white font color that I'm not taking into account?
You need to use !important to overide the default value of the color set by bootstrap
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Student Union for Purposeful Education</h1>
<h3>Learning <em>by</em> students, <em>for</em> students.</h3>
<hr>
<button class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
CSS
body {
background: url(https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6726719ee78dabe78033950d9f3f7145&auto=format&fit=crop&w=1650&q=80);
background-size: cover;
background-position: center;
font-family: 'Exo';
color: white !important;
}
#content {
text-align: center;
padding-top: 25%;
}
here is the codepen
https://codepen.io/anon/pen/LQaKzb
I don't have a specific code example, just looking for a general answer.
I know my navbar doesn't resize well in mobile, so is there a good/correct way to fix this? Someone mentioned using CSS #media queries, but I don't know anything about them.
If I do need media queries, what's a good resource to learn about them? Everything else looks fine when I use col-md-(), just not the navbar.
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
<!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>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<a href="#">
<h2>Balloons</h2>
</a>
<p> Our hand crafted balloon creations are a hit at every! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon things for events!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<a href="#">
<h2>Flowers</h2>
</a>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<a href="#">
<h2>Gifts</h2>
</a>
</div>
<div class="col-md-12 col-xs-12 text-center">
<a href="#">
<h2>Hours</h2>
</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
html css twitter-bootstrap
You can learn more about CSS #media queries here:
templatemonster.com/blog/css-media-queries...
It explains about media queries and how to make it work on other devices, and it includes an IE 7 and IE 8 fallback mechanism.
IF you want to learn Bootstrap, you can use bootstrap GUI designing tool:
codepley.com/go/bp/new
I do two things. (When the first one not working properly, I'll go to the second method.)
First Method.
I search for common mobile device sizes and used them to adjust the navbar according to it. Common sizes are 320px, 375px, 480px, 640px, 768px, 1024px.
#media (max-width: 600px) {
Your code here
}
Second Method
If my common sizes are not correctly working I tried to reduce the sizes one by one and try to get the absolutely correct matches that may not destroy the website.
I'm a begginer coder and i'm learning to use bootstrap grid. Although, i didn't quite understand how the container margins work.
I wrote this piece of coding for a website footer and tried using bootstrap grid, but i wanted the social icons to be about 20px to the right and i can't get it. Inspecting the element at google chrome i can see there is a margin right but i can't seem to customize it and make it smaller.
take a look - this is my footer's html code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
Now, this is my CSS code:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
a i.fa:hover {
color: #57cdf7; !important;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!
I'm assuming that your question means you want the social icons to sit on the FAR right of the screen, not necessarily in the confines of the grid that Bootstrap sets.
You would be messing with the Bootstrap grid to re-define .container like you did, and there are issues that go along with that (as you saw).
The best bet is to create an entirely separate component that you can move to wherever you want, independent of the Bootstrap grid.
HTML
<div class="social-icons">
<ul>
<li>Social Icon</li>
<li>Another Icon</li>
</ul>
</div>
CSS
.social-icons {
position: fixed;
bottom: -10px;
right: -5px;
}
ul {
list-style: none;
}
.social-icons li {
display: inline;
padding-right: 30px;
padding-bottom: 20px;
width: 100px;
}
CodePen
This in particular glues the social icons to the bottom of the page regardless of scrolling. But it gives you an idea of what to do.
First, you are supposed to wrap the whole content inside the container. Container is pre set class in bootstrap to keep your content in the appropriate place with appropriate width on different size screens.
<div class="container">
<footer>
<div class="row">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-6">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
</div> <!--end container-->
Also, the cols should equal to 12. col-md-2 + col-md-4 + col-md-6 = col-md-12.
col-md-12 is the full width of the page.
Here is a good read for you: http://getbootstrap.com/css/
And, what you are seeing in the inspector "margin right by social icons" is padding or the width that is pre set on your container in the bootstrap css.
First, Use row and container Class Separately.
Second, Your cols should equal to 12 as described in bootstrap grid system.
Third, you can also use offsetting columns which increases the left margin. example is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script>
</head>
<footer>
<div class="container ">
<div class="row ">
<div class="col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class=" col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class=" col-md-3 col-md-offset-3">
<i class="fa fa-home fa-2x" aria-hidden="true" ></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</footer>
Edit : This is what it shows
I want to use font awesome using : <span class="fa fa-user"></span>.
When I put this code in the div with row and custom class, it doesn't work. But when the div has only row class, it works.
WORK
<div class="row">
<div class="col-md-12" >
<div class="col-md-3">
<span class="fa fa-user"></span>
</div>
</div>
</div>
DOESN'T WORK
<div class="row bottom">
<div class="col-md-12" >
<div class="col-md-3">
<span class="fa fa-user"></span>
</div>
</div>
</div>
CSS
.bottom
{
height:auto;
background-color:#5C772A;
color: white;
margin-top:30px;
}
Any Idea please ? Thanks.
It is working fine I guess. Let us know what is not working?
EDIT:
Remove the font-family in the below style that you are using and it will work fine (it overrides font-awesome styles)
.bottom span {
font-size: 12px;
font-family: Arial, sans-serif;
}
EDIT 2:
Another option:
Without changing any css replace span with i like this:
<i class="fa fa-user"></i>
and it will work without changing your css!
.bottom
{
height:auto;
background-color:#5C772A;
color: white;
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row bottom">
<div class="col-md-12" >
<div class="col-md-3">
<span class="fa fa-user"></span>
</div>
</div>
</div>
This is because you are using this css rule:
.bottom span {
font-size: 12px;
font-family: Arial, sans-serif;
}
This is overriding the font-family of the font awesome spans, you should remove the font-family rule and everything will be working fine.
Or you can use the not CSS selector to add your rule to every span inside .bottom but .fa spans:
.bottom span:not(.fa) {
font-size: 12px;
font-family: Arial, sans-serif;
}
Or you can use <i class="fa fa-user"></i> instead of spans for font awesome icons.