I have added a animated header in my webpage project, but as I am using Bootstrap too, I get default padding shown in the following image (white spaces). screenshot of the webpageHow shall I remove it?
I tried changing positioning in the css files, yet I had the left padding. Finally after removing the bootstrap, it works well.
code
simple just remove container class from your html
<div class="demo">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">Internet <span class="thin">Of</span>Things</h1>
</div>
</div>
</div>
Related
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 would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.
I have got the current effect using the second answer from this question:
Add centered text to the middle of a <hr/>-like line
Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.
Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:
I can't continue to use media queries as I would have to apply them per pixel!
There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?
Any help would be appreciated.
Using Bootstrap this solution should work fiddle:
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<hr>
</div>
<div class="col-xs-2">
<a class="btn btn-md btn-primary">Add</a>
</div>
<div class="col-xs-5">
<hr>
</div>
</div>
</div>
You can use image for these lines by simply adding img tag:
CSS
img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}
HTML
<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>
Demo
http://jsfiddle.net/qW6z9/
i just started using bootstrap, and i think it's awesome. but i'm having a hard time figuring out how to add a wrapper around the basic container of bootstrap.
I'm using the Fluid responsive css, and it centers the elements inside the .container nicely.
but my WHOLE page as a whole has a BACKGROUND, and i wanted a different background for the actual content area (where the container is)
So basically i have for example
<div id="wrapper-page" style="background-color:grey; ";>
<div id="wrapper-content" style="background-color:#93C;>
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
</div>
Is there a simple way to achieve what i need?
I actually could easily modify the bootstrap.css file to kind of achieve what i want but i really want to keep my modifications outside of the template/framework for easy upgrade later
Why don't you make the wrapper-content also a Bootstrap .container?
<div id="wrapper-page" style="background-color:grey; " ;="">
<div id="wrapper-content" class="container" style="background-color:#93C;">
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
Demo
as you can see, vote button and some text got out of div. how to fix it? and how to set a value of width, when column become "adapted"?
code is:
div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
Seems like extra padding is given to the inner element of span2 which is causing such problem, remove that padding and everything is gonna work fine hopefully!
Another possible solution would be fixing left bar as you want it for always
try
position: fixed;
I am sure one of the solution will work for you!
I have an image and also a small container that I want to be placed on the container, but it sets this ".innerimage" below the image.
Do not suggest using top: xx; because in my actual project I have many divs with the same class and I can't use top or it will screw it up.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
If I well understand your need and if you don't have to support IE7, maybe you could use the display:table and display:table-caption
I updated the JSFiddle with these CSS properties:
http://jsfiddle.net/ZhdMj/1/