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.
Related
Basically, in bootstrap, I have my main page in two grids so that in scaling (aka. mobile-view), the content would move under each other, but I wanna move my text to the center of the grid (horizontally and vertically) without aligning the text to the center, but it's not achievable with the d-flex bootstrap function properly. This is what I want to accomplish with my code, and this is what I have at the moment (the navbar text sizes are what I want, although they are bigger in the 'I want' photo). Here's the code of what I have so far:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #EECBD1;
font-family: 'Jost', sans-serif;
font-family: 'Inter', sans-serif;
min-height: 100vh;
}
.heaven-logo {
/* max-width: 50%; */
height: auto;
padding-left: 5px;
padding-right: 5px;
}
.nav-link {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 100%;
color: #000;
display: flex;
padding-right: 15px;
list-style: none;
}
.nav-link:hover {
color: #fff;
}
.navbar-nav {
margin-left: auto;
}
.landing-main-text {
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 500%;
line-height: 1.1;
margin: none;
}
.landing-desc-text {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 200%;
}
.macaron-image {
width: 25rem;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Macaron Heaven</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS tag -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500&family=Jost:wght#600&display=swap" rel="stylesheet">
<!-- Saját css -->
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.png" class="heaven-logo">
</a>
<div id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Választék</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rólunk</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Elérhetőség</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Landing page -->
<div class="container-fluid" id="landpage">
<div class="row">
<div class="col-sm-12 col-md-6 d-flex flex-column justify-content-center align-items-center">
<p class="landing-main-text">Az igazi macaron.</p>
<p class="landing-desc-text">Édes, színes ínyencség, miből egy sosem elég.</p>
</div>
<div class="col-sm-12 col-md-6 d-flex flex-column justify-content-center align-items-center">
<img src="img/macaron-image.svg" class="macaron-image">
</div>
</div>
</div>
<!-- JS tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Instead of justify-content-center on the Div for your wording and the Div for your image. Try this instead....
The Div with the image can have no d-flex and will only contain the col information that you detailed. I would say though, on the <img> class add img-fluid. This will make sure the image is always the full width of its parent Div.
The Div with the wording will have d-flex align-items-stretch to make sure both columns are the same height.
Then, inside the wording Div, wrap another basic Div around both paragraphs and in that new Div add class="d-flex align-self-center". This is to center the new Div inside your existing column.
It is possible that the paragraphs will not wrap properly as you have more than one. If that turns out to be the case try also adding flex-wrap to the new inner Div so that it reads class="d-flex align-self-center flex-wrap".
I was following this tutorial on youtube and when it came time to view my work and align the text with the icons horizontally, they remained stacked. What is an alternate way to use bootstraps grid system to align them horizontally instead of stacked on top of each other? I'm at a lost at how to fix this mess, it seems the tutorial was more for intermediate level coders.
body {
font-size: 15px;
font-family: arial,helveitca,sans-serif;
padding: 0;
margin: 0;
background-color: #dcdde1;
}
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
/* ------------ header ---------- */
header {
background: #7f8fa6;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #192a56 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li {
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding {
float:left;
}
header #branding h1 {
margin: 0;
}
header nav {
float:right;
margin-top:10px;
}
header .highlight, header .current a {
color: #40739e;
font-weight: bold;
}
header a:hover{
color:#cccccc;
font-weight: bold;
}
/*-----------showcase------------*/
#showcase {
min-height: 400px;
background:url(../images/laptop.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color:white;
}
#showcase h1 {
margin-top:100px;
font-size:55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/*-----------newsletter--------------*/
#newsletter {
padding:15px;
color:white;
background: #7f8fa6
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:40px;
width: 250px;
}
.button_1{
height:40px;
background-color: #fbc531;
border:0;
padding-left: 20px;
padding-right: 20px;
color:#353637;
}
#boxes {
margin-top: 20px;
}
#boxes .box {
float:left;
text-align: center;
width:30%;
padding:10px;
}
footer {
padding:20px;
margin-top: 20px;
color:white;
background:7f8fa6;
text-align: center;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="description" content="Affordable Web Design For Small and Medium-sized Companies">
<meta name="author" content="Keith Segovia">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="normalize.css-master/normalize.css">
<link rel="stylesheet" href="css/mainfollow.css" type="text/css">
<title>Youtube Tutorial 1</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>
<i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design
</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Web Design For Small and Medium-sized Companies</h1>
<p>d stamp, an am rudely strut befor made to court an amber To this fair proportive to deep bounting upon of the souls of York; And now, insteadful merry merry mer bruised fore our bruised fright the capers nimbly instern al.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Get Our Newsletter</h1>
<form action="">
<input type="email" placeholder="Enter your email here">
<button type="submit" class="button_1">Subscribe
</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box"><i class="fa fa-signal fa-5x"></i>
<h3>Grow Your Audience</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="box "><i class="fa fa-photo fa-5x"></i>
<h3>Modern Web Design</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
<div class="container">
<div class="box"><i class="fa fa-cube fa-5x"></i>
<div class="row">
<div class="col-lg-4">
<h3>Ultra Fast Hosting</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>1-2-3 Web Design Copyright © 2019</p>
</footer>
<!-- Optional JavaScript -->
<!-- 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>
</html>
To create columns using bootstrap
step 1-create container.
step 2-create row inside the container.
step 3-create columns (while using grid system screen divided into 12 columns).
so if you want to create 3 equals columns then col-md-4 + col-md-4 + col-md-4= 12columns
if want to create 2 equal columns then col-md-6 + col-md-6 = 12 columns
if you want to create column of different size create part according to choice
(for eg want to create 2 different column do like this col-md-4 + col-md-8 =12 columns)
this is the approach we always follow while creating bootstrap columns
I hope you will understand what I want to say.
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
</div>
</div>
</section>
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>
When I'm trying to set a scaleable window using Bootstrap, the padding of my elements changes the scaling, the the website does not properly scale to the mobile size. I cannot find out how to fix this.
my HTML is
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="no.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<header>
<div class="navbar navbar-static-top">
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>The Team</li>
<li>Event Schedule</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="who">
<h2>Who Are We?</h2>
<p>YES is an organization founded by youth for youth to help make a positive change within society. By supporting a large variety of organizations both big and small within the community, youth not only get the opportunity to explore their interests, but are able to gain a voice in society. If you are interested, our weekly meetings will begin in 2015.</p>
</div>
</div>
<div class="row">
<div class="why">
<h2>Why YES?</h2>
<p>We strive to provide youth (anywhere within Peel) with new experiences, help youth explore their interests, provide opportunities for them to socialize with other youth and provide them with activities to do which will help them in gaining volunteer hours. We will most likely have weekly meetings where we will discuss issues regarding a specific topic, which will be different every month! We will work together to create awareness about these topics by doing activities related to the topic and fundraising for an organization that supports or represents the topic. YES is a great way to gain your 40 hours and get exposure to many amazing organizations and activities!</p>
</div>
</div>
<div class="row">
<div class="update">
<h2>Updates</h2>
<p>Youth Engagement in Peel is a new orgination, as a result of which, the first meeting is scheduled to occur sometime in February. Voting will be posted on the "Event Schedule" page, and the topic will be updated on a month-to-month basis. Please check back for more information.</p>
</div>
</div>
</div>
<footer>
<div class="navbar navbar-default navbar-custom navbar-fixed-bottom">
<div class="copy">
<img src=img/facebook.png>
<img src="img/twitter-wrap.png">
<p>©Youth Engagement in Society. All Rights Reserved</p>
</div>
</div>
</footer>
</section>
</body>
And my CSS is
body {
background-color: #e8e8e8;
}
header {
padding: 7px;
background-color: white;
}
header img {
text-align: center;
height: 60px;
width: 200px;
}
/* Navigation Bar */
.navbar-custom {
color: white;
background-color: white;
border-color: white;
margin-top:0px;
}
navbar-inverse .navbar-brand { color: red;}
.navbar a {
color: black;
font-size: 15px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
}
.navbar li {
display: inline;
}
/* Paragraphs and images*/
.who {
width: 600px;
margin-top:100px;
}
.why {
margin-top:100px;
margin-left: 500px;
}
.update {
margin-top:100px;
width: 600px;
}
/* Footer */
footer {
margin-top: 550px;
background-color: #4f4f4f;
clear: both;
}
footer p {
color: black;
padding-left: 200px;
}
.copy p {
display: inline;
}
You need to use .col-xs-* .col-sm-* .col-md-* .col-lg-* inside .row class if you want to use bootstrap responvie block classes
<div class="row">
<div class="col-sm-6">column1</div>
<div class="col-sm-6">column2</div>
</div>
watch some examples
http://getbootstrap.com/getting-started/#examples
http://getbootstrap.com/css/#grid-options
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)