?
Solved

keep my div the same size as my nav menu and aligned under it using bootstrap

Posted on 2014-11-17
5
Medium Priority
?
401 Views
Last Modified: 2014-11-18
I'm new to Bootstrap and am having difficulty aligning my div under my nav menu and keeping it there during a resize. is there any specific bootstrap classes I can do to achieve this?

The page in question can be found here. The white box with the intro text needs to be the same width as the navigation menu above it, as well as be aligned underneath it whenever the browser is being resized.

Thanks in Advance!
0
Comment
Question by:Big Monty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 40450063
You could wrap the text and logo in a div with class of container (seems like you commented it out at one point) Then you would have to remove the CSS rules that give it the position absolute and the margin right of 18%.

<div class="container">

            <div class="row">
                <div class="col-lg-3 pull-left xtLogo">                   
                    <img src="img/logo.png" height="200" width="200" />
                </div>

                <div class="col-lg-9">
			            <div class="mainText pull-right">
					            <h1 class="text-center">Welcome to ExchangeTree.Org!</h1>
					            <p>
						            ExchangeTree facilitates the pursuit of passions, interests, and needs through exchange in your community. Barter goods, services, things 
						            you can teach, and things you can lend or share, with other trusted users.
					            </p>
				            <br />
			            </div>
                </div>
            </div>

        </div>

Open in new window


Then remove position: absolute and margin-right: 18% from the .mainText class.

Hope that helps!
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40450138
thanks for the suggestion!

I tried what you said, got rid of the position and margin-right css rules, but it just pushed the box all the way to the left, and when I resized the browser, it didn't stay roughly under the nav nar. if I keep the margin-right at 18%, it aligns properly under the nav bar, but again, it doesn't resize accordingly when the browser is resized.

The container class, is that just a generic container? is it suppose to be responsive automatically (resize automatically), or does it have more attributes? I'm having a hard time finding documentation for the core classes in Boostrap that describes their attributes
0
 
LVL 33

Author Closing Comment

by:Big Monty
ID: 40450157
ignore my last response, it does work :) I had forgotten to hit save on my index.htm file, caffeine hasn't hit me yet :)

thanks again for the help, much appreciated! I may have a few more questions coming up if you're interested
0
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 40450161
Great! I will keep an eye out for them.
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40450852
posted another (simple I hope!) question if you're interested in having a look:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28564957.html
0

Featured Post

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question