I'm having issues with putting together my page based on my design with Bootstrap. I will provide the following html code and see if someone can help me understand why my footer isn't the full width of the page and why my purple box class is.
If you can review my html code and see if you can explain to me also why my image under Lessons isn't the full width as well because I set it to 100% width which I was understanding does it compared to its parent container which would be the div with a class of container.
Link to actual dev site page. Dev Lessons Site Page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A great site to hear the musical talents of Cassandra Davidson and also to promote her as a private instructor.">
<meta name="keywords" content="music, teacher, lessons, weddings, church">
<meta name="author" content="Jeffrey Davidson">
<title>Cassandra Davidson Studio</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<header>
<h1>Cassandra Davidson Studio</h1>
<nav>
<ul>
<li><a id="active" href="index.html">Home</a></li>
<li>About</li>
<li>Lessons</li>
<li>Recordings</li>
<li>Contact</li>
</ul>
</nav>
</header>
<h2>Lessons</h2>
<div class="row">
<div class="col-xs-12">
<img src="assets/images/music-staff.png" alt="Music staff">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>About Your Lessons</h3>
<p>Lessons are face to face once a week for 30 minutes or 60 minutes. Times based on age, and level of interest. Lessons are given for students to gain knowledge of the flute. They will learn flute techniques, musicality, and standard flute works. Students will learn to perform for others and gain confidence in themselves and their playing.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Practice</h3>
<p>Students are expected to practice every day. Students in a 30 minute lessons should be practicing for at least 30 minutes every day, while students in 60 minute lessons should be practicing for at least 60 minutes.</p>
</div>
<div class="col-xs-6">
<h3>Materials</h3>
<p>Student should bring with them to lessons books decided by the instructor at their first lesson, and a spiral notebook. There may be more needs as the student moves on in lessons. These book will include, a tone book, technique book, etude book and solo material. For beginning students they should also bring the book being used in their band class.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Recitals</h3>
<p>The studio will give at least two recitals throughout the year. Students are expected to play for these recitals and stay to listen to their peers. If a student needs to miss, there will need to be approval beforehand. Recitals are a good opportunity for students to learn from others and to hear different pieces of music.</p>
</div>
<div class="col-xs-6">
<h3>Masterclasses</h3>
<p>The studio will provide a masterclass situation about three times a year. This may be all students of the same age together in a joint lesson with the teacher, bringing in another instructor to give feedback, or a few students playing solo and getting feedback from the other students as well as the instructor. The students are expected to attend these classes, so they can benefit from hearing other students, playing with students, and getting feedback from another source.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>Payment</h3>
<p>Payment is due at the beginning of every month, for the entire month. The cost is $25 per lesson for 30 minute lessons and $50 per lesson for 60 minute lessons. This cost includes all expenses for the recitals and masterclasses, so there are no extra fees for those events.</p>
</div>
<div class="col-xs-6">
<img src="assets/images/girl-playing-piano.png" alt="Girl looking at camera while playing piano.">
</div>
</div>
<div class="row">
<div class="col-xs-12 purple-box">
<h3>Cancellation/Make-up</h3>
<p>If a student cannot attend lessons for any reason, please call the instructor as soon as possible. If possible at the beginning of each month, let the instructor know if the students cannot attend any lesson that month. If the instructor receives at least 24 hour notice than there will be a make-up lesson scheduled if possible or a credit for the next month. Make-up lessons are always preferred and the use of a credit should only be used if a make-up lesson cannot be scheduled because of conflicts. If a student does not show up for a lesson without notifying the instructor there will be no make-up lesson or credit. If the instructor must miss for any reason, they will contact the students as soon as possible and schedule a make-up lesson or give a credit.</p>
</div>
</div>
<footer>
<div class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Simplify your markup.
The row class provides negative margin (-15px) left and right, so that the columns appear properly within them.
The col class elements have 15px padding left and right to provide spacing "internally", but this causes the 15px of space on the left / right edge, which is why the row column has negative margin.
The div.row inside of footer was unnecessary, and causing the extra space.
<footer class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</footer>
As for the image, it does not have any styles on it, therefore it is not filling the full width. (I've inspected your live site using browser inspector, and there are definitely no styles on it).
Give it a class, or apply styles directly, so that:
img {
width: 100%;
height: auto; /* without this, the image will skew */
}
Lastly, for your left / right spacing after thinking this through, in order for this to be responsive, your best bet is to use some markup / css to provide a "max width" on the spaces. If you used padding, you'd have to adjust the padding at each media query / kick, where really what you are after is some space at the larger desktop sizes.
Personally, for clarity, I like to create a div called "liner" or similar, like so:
<footer class="row">
<div class="liner">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</div>
</footer>
Then, give that liner some css like so:
div.liner {
margin: 0 auto; /* auto ensures it will stay centered */
padding: 0; /* may or may not be necessary depending on your resets */
max-width: 1000px; /* or whatever your desired max width is */
}
Add this .liner to your header, footer, and your main content area, and you will get the desired effect.
Add row class for footer and remove it for div inside (then you can safely remove that div):
<footer class="row">
<div class="col-xs-12">
<p>© 2015 Jeffrey Davidson</p>
</div>
</footer>
To match your page look to an image further you can add some padding to <p> in a footer:
footer p {
padding: 10px 0;
}
Just adjust padding value to get desired effect.
Related
I am trying to format a news-feed item and want to include a glyphicon to illustrate the type of news item and then a user defined text field next to it. I would like to have the text formatted such that it is indented about four spaces from the glyphicon (Second news feed item in the JSFiddle where I hardcoded it in a non-reproducible way).
I made a layout where the glyphicon was in a col-xs-1 and the rest of the screen was for the text and then zeroed out all the padding but it still too far to the right for what I would like (Third news feed item in the JSFiddle).
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<h3><span class="glyphicon glyphicon-earphone"></span>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider-yellow"></div>
<div class="col-xs-12 news-feed-item-container">
<h3 style="white-space:pre"><span class="glyphicon glyphicon-earphone"></span> New conversation with Brett Harrsion from Firm XYZ shows there<br> is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at Firm XYZ that lead us to believe we will be able to sell product A to them sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider"></div>
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<div class="col-xs-1" style="padding-right:0">
<h3><span class="glyphicon glyphicon-earphone"></span></h3></div>
<div class="col-xs-11" style="padding-left:0">
<h3>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3></div>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
JSFiddle:
https://jsfiddle.net/schins02/r0p83uaq/
Image of feed items with styles applied =>
http://imgur.com/a/XTERt
This seems a bit picky so thanks for any help provided!
Given your needs, I would not recommend relying on .col-*-* for your positioning. Your needs are simply below what Bootstrap's Grid framework is designed for.
Instead, I would rely on wrappers with .pull-left and .pull-right to position your icon and content. I've created an example here:
http://www.bootply.com/LwfLZZ2exY
Note: My example makes use of calc() because I wasn't sure how responsive your design approach needed. You may need to adjust this (and of course any other element) to best-suit your intentions.
I'm a student in the process of learning HTML and have been having difficulty positioning a div tag. When I try to change the position (I need it to be "position:fixed;") it doesn't move. What I've gathered from other threads is that the div tag is positioning itself relative to the body, however if it has the position set to fixed, shouldn't it be fixed?
Note: This is all messy because I am still trying to learn the language. I included the entire HTML file just in case something else is causing the error. There is no CSS file involved yet in the document.
Below is the part I am trying to get to work. Thanks in advance.
a{position:fixed;}
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Home
Portfolio
Links
Contact
</div>
body{font-fmaily:Times New Roman;}
h1,p{text-align:center;}
a{position:fixed;}
<!DOCTYPE html>
<html>
<head>
<title>Jem Jolly</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<img src="Random Banner.png" alt="Random Banner" style="position:fixed;left:130px;top:43px"/>
</div>
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Home
Portfolio
Links
Contact
</div>
<div>
<div style="background:#A7DbD8;position:fixed;height:300px;width:600px;top:175px;left:20px;border:3px solid #19B3B0">
<h1 style="font-family:cooper black;">JEM JOLLY</h1>
<p>JEM JOLLY Founded in 2000, Jem Jolly started as a small, family-owned jewelry store. All of our products were hand-crafted by local artists, metalsmiths, and bead workers. Since our humble beginnings, we have grown into a nationwide company with distributors, retailers, and other wholesalers representing us and our products in 20 states, as well as Canada and the UK. Check out our retailer list <insert link to retailer page once it is created> for locations near you.</p>
<p>We also take custom orders. Feel free to send us specific instructions for custom orders through our contact form <insert link to contact page once it is created>, if you are interested in a unique item for that special someone!</p>
<p>Jem Jolly is pleased to be your supplier of finely crafted, high-quality jewelry that is timeless, eye-catching, and unlike anything you've seen before.
</p>
</div>
</div>
<div>
<div style="background:A7DbD8;position:fixed;height:240px;width:320px;top:175px;left:640px;border:3px solid #19B3B0">
<video width="320" height="240" controls>
<source src="intermediate_web_design_U4L3_vid 10-39-13.mp4" type="video/mp4"></source>
</video>
</div>
</div>
<div style=width:500px;height:100px; position: relative;">
<img src="rsz_3logo.png" alt="Random Logo" style="left:20px;top:43px"/>
</div>
</body>
</html>
You have misspelled the word position
CODE
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Fix to
<div style="background:#A7DbD8;position:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Are you working with some kind of an editor?
If you are working with just notepad you are going to get mad with those short of tiny errors.
Get yourself a decent editor...
Also, you don't need all of those menu items in fixed position, its enough that the parent element is fixed.
I just placed an image in the 'about me' section of my main page and am not able to change the border radius of the image without all the other images changing as well..
CSS:
.well .col-lg-12 .about, img {
border-radius: 50%;
}
HTML:
<div class="well">
<div class="row">
<div class="col-lg-12">
<img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
</div>
Demo
This is the result of the code I currently have:
A couple of things wrong that you should consider.
DO NOT STYLE IDs - IDs can't be cascaded and they are unique. This means if you wan to share your styles, you can't because you attached it to an ID instead of a class which you can reuse.
For example: You can't have two DIVs with ID about. But if you wanted both DIVs to act the same way, now you are going to have to repeat the CSS rule for both DIVs. Instead, you create a myClass, style it, and repeat the class wherever you want as much as you want. --- Scalability & Maintainability
DO NOT STYLE BOOTSTRAP CLASSES - Some Bootstrap classes, specially col-* classes, shouldn't be styled or considered in your specificity. This creates a problem because your style will only work for as long as you want it to be col-lg-12. If you decide to change the class to make it respond, your specificity failed. Instead cascade a custom class and use it as a hook of your specificity.
For example, You styled your specificity .col-lg-3 .myClass{something} But decided later that col-lg-3 was too big. So you change it to col-lg-2. Now you have to go to the CSS and change that specificity to .col-lg-2 .myClass{something}...Double work. If you leave bootstrap class out of it, you only change the HTML architecture and nothing else
This is what I would do if I were you:
<div class="col-lg-12 myClass">
<img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
And your CSS
.myClass img.about {
border-radius: 50%;
}
DEMO
Give the image an id tag and just use that id in the CSS. This way, you only are targeting that specific image, and not the others:
https://jsfiddle.net/32nydcjw/
HTML:
<!-- About Me Well -->
<div class="well">
<div class="row">
<div class="col-lg-12">
<img id="aboutMeImg" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
</div>
</div>
CSS:
#aboutMeImg {
border-radius: 50%;
}
I have two bootstrap items one col-md-5 and one col-md-4. But i want to centered these two items in the middle of the page, both of them. Now my col-md-4 is at the left side of the page and the col-md-5 is at the middle of the page. Has anyone an idea how to centered these two items without use only margin.
<div class="col-md-4">
<div class="klantcases">
<h2>Company</h2>
<li>Over ons</li>
<li>Kernwaarden</li>
<li>Missie en visie</li>
<li>Nieuws</li>
<li>Blog</li>
<li>Development Blog</li>
<li>Marketing Blog</li>
<li>Development</li>
<li>Marketing</li>
<li><a href="#">Werken bij ons></li>
</div>
<div class="col-md-5">
<div class="blogpreview">
<img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
DEVELOPMENT BLOG</h1>
<img src="img/bloglaptop.jpg" alt="bloglaptopcode" />
<div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
MARKETING BLOG</h1>
<img src="img/iphone.jpg" alt="iphonehand" />
<div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
</div>
You can offset columns in bootstrap. See Docs.
By using a class such as, col-md-offset-4 you can push your columns across the page.
In your case you would need to adjust your columns to make up an even total, e.g. col-md-4 and col-md-6, and then add col-md-offset-1 to offset the first column by 1 column.
Since the Bootstrap default grid has 12 columns, you cannot center the 9 columns grid with the default Bootstrap offsets. So all you need to do is create a custom 1.5 offset (which left margin would be equal to 1.5/12*100% = 12.5%) and apply it to the .col-md-4 container:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-custom">...</div>
<div class="col-md-5">...</div>
</div>
<!-- / .row -->
</div>
<!-- / .container -->
#media(min-width: 992px && max-width: 1199px) {
.col-md-offset-custom {
margin-left: 12.5%;
}
}
JSFiddle: http://jsfiddle.net/Lq06L4hb/2/
Using Bootstrap 3.2, I have a section of website that has three divs (.col-lg-3 box) that will have differing amounts of text in them. I'd like them all to extend to the bottom of the containing div (.row). A link to the CSS file I'm using is here: https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css.
The answers I've seen on Stack Exchange for this general issue (same height divs in a container) either don't use Bootstrap or are have outdated syntax. If you can link me to a SxE question that perfectly mirrors mine, I'll gladly take the downvotes in exchange for an answer.
<div class="container-fluid join">
<h2 class="text-center white-heading" id="join-ita"><strong>Join ITA</strong></h2>
<!-- <hr class="line-black"> -->
<div class="row">
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Newcomers Begin Here</h3>
</div>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own <span class="emphasis-blue">GaZoom</span> personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Experienced Part-Time Agents</h3>
</div>
<p>Immediately earn 80% of paid commissions paid within 2 weeks of receipt. Enjoy your business at your pace with the <span class="emphasis-blue">GaZoom</span> family of products and services. Upon registering you will immediately receive your personalized website with our diverse and unique travel opportunities for your clients at your fingertips. A 24 hour assist program is available for you and your clients. You'll be eligible to participate in our corporate and leisure lead generation program. No monthly minimum requirements.</p>
<button type="button" class="center-block btn btn-warning btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Experienced Full-Time Agents</h3>
</div>
<p>You're eligible to receive one of the highest paid commission levels in the industry: 85%, which is payable within 2 weeks of receipt when you maintain monthly bookings. Bring your clients and enjoy one of the industry's most dynamic and unique inventory and booking sites. Be confident that you and your book of business is protected and can be serviced with our 24 hour assist program. We can assist in growing your business by offering you a lead generation program for corporate travelers as well as leisure travelers.</p>
<button type="button" class="center-block btn btn-red btn-lg">JOIN NOW</button>
</div>
</div>
</div>
There are many ways to create equal height columns. None, unless you're using actual tables, are outdated. Flexbox works for modern browsers. You can use jQuery. You can use really large amounts of padding-bottom and negative margin bottom. You can use display:table on the .row and display:table-cell on the columns (after you remove the floats).
However all of the CSS approaches only give you something like this:
Reference: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
This is because there's no margin as gutter in the Bootstrap grid, it's padding.
But what if you want to have some boxes like this?
You can't because there's no margin between. You can use borders and :before/:after, but what if you have a background image as your page's background?
For the last few years I've used a jQuery approach. This is the latest script I'm using and it's very smooth: https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
Here's how to use it (once it's loaded after jQuery):
$(window).load(function() {
$('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});
This can be a child class of the column, which is what allows you to make the second figure in this answer.
Here's an example with some fake content and flush bottom buttons. You'll notice that the equal heights are responsive and they are per visual row, so it's not the tallest of the tall it's the tallest of the nearest siblings. So, essentially, it gives you expected results:
DEMO: http://jsbin.com/tunohe/1/