I'm having an issue using twitter bootstrap on my webpage http://scrapp.site90.com/ . Header is wrapped in container and has .row around it, but seems that because of margin-left: -20px this row cannot align with other content. Is it possible to fix it? I tried to change value of margin-left, but then layout gets really messed up.
Instead of using the span* you could use pull-left on the H1..
<div class="row">
<h1 class="pull-left">Take a look at our work to see what we mean</h1>
<div>
<ul class="social inline pull-right">
<li>..</li>
</ul>
</div>
</div>
Related
I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.
I am attempting to embed ShareThis code in to a website created using Bootstrap.
Problem is that for some reason the bottom of both buttons is cut off and also I cannot seem to center the buttons using Bootstrap column offsets as it seems impossible to get both buttons exactly centered using this method.
What is the solution here?
<div class="row">
<div class="col-lg-12">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
I'm not too familiar with the ShareThis buttons, do you have a link to view the site?
Regarding the centering, currently you are using a col-lg-12 which means it takes up 100% of the width and everything inside (your buttons) would be left aligned by default. You wouldn't necessarily need to use the bootstrap column offset but just put the spans in a wrapper as below. You can find out more about the Bootstrap Grid here http://getbootstrap.com/css/#grid.
<div class="row">
<div class="col-lg-12">
<div class="social-wrapper">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
</div>
Then add text-align:center to the wrapper.
.social-wrapper {
text-align: center;
}
Check out a JSFiddle here: https://jsfiddle.net/hez7pqbo/
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
I'm using the Bootstrap framework and I've created a column in which I've used text-align:center; css property on two elements and there are not aligned the same and I don't understand why.
Here's the markup:
<div class="row text-center">
<div class="col-lg-4">
<div class="thumbnail-header">
<h1>Brand</h1>
</div>
<div class="thumbnail-content">
<ul>
<li>Identity</li>
<li>Strategy Brand</li>
<li>Identity Manual</li>
<li>Guide Brand</li>
</ul>
</div>
</div>
'text-center' class has text-align:center; css property.
And here is a working fiddle: fiddle
Can someone explain me why those elements are not aligned properly ?
It's the default left padding on the <ul>
ul {
padding-left: 0;
}
Updated fiddle
I suggest instead of using .text-center Helper class use the .center-block for centering an element in bootstrap because this helper class use margin and display css properties for cenetering the element
I thought text-align works in Twitter Bootstrap but it doesn't? I'm not sure what's going on. Is there an alternative to centering or am I just going to have to use margin? Sorry for the overkill with the style text-align. I just wanted to make sure I wasn't missing anything.
<div class="row-fluid span12" style="text-align:center;">
<ul class="nav nav-pills" style="text-align:center;">
<li style="text-align:center;">Skills</li>
<li style="text-align:center;">Music</li>
<li style="text-align:center;">Things I Read</li>
</ul>
</div>
I think it might be because bootstrap sets the anchors to be display: block. Text alignment works on inline and inline-block elements. Have you otherwise customized the bootstrap css? The nav pills should have the text centered anyway, unless you've specified a width, because it should just be adding even padding to the block-level anchor element.