When I put content in under navbar, the content starts top of the page and blocked by the navbar. So how does the jumbotron class place the content below it? I can't figure it out by looking in the chrome dev tools (i kno...).
So how does one generally place content under the navbar?
If you're using the regular, non-fixed navbar, just put your content below it with no special styling.
But if you're using navbar-fixed, you DO have to put body { padding-top: 70px } to avoid your content being obscured.
.jumbotron has no special styling tho avoid this, although it does have it's own internal padding specific to .h# classes which pads them, but the jumbotron itself is still overlapped by navbar-fixed.
See this:
Static Navbar: http://www.bootply.com/gkCqPq2Cti
Nabar-Fixed-Top: http://www.bootply.com/BsBIXWldc2
Related
I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
Im using yiibooster with yiibootsrap in the yii framework. I dont want the site to be responsive so i set responsive to false. The problem is the default container width is too small, 940px. I want to change this to 1045px.
You could change the width set in protected/extensions/bootstrap/assets/css/bootstrap.css here:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
Alternatively, this is what I'm currently doing, you can override the CSS in your layout. In my protected/views/layouts/main.php I've added this style to the container div like this:
<div class="container" id="page" style="width:99%;">
Hope one of those options is useful to you...
The CSS is in \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.no-responsive.css
If you look at the css carefully, you will find several places where the 940px is hard coded in the css. This is how you get the 940px.
You can edit this, but I would highly discourage doing so for 2 reasons. First it is highly discourage to hack the standard code. It is better to override it with your theme css. Second, there are other css elements that are tied to the 940px. Changing the 940px in the container css may break other css. To overcome this problem, open up the responsive css, i.e. \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.css
Search for the word #media
Keep on searching until you find
#media (min-width: 1200px) {
what ever enclosed within the braces are the css elements that tied up to the container size. Copy them and place them at the end of your non-responsive file (or better in your theme css).
Thanks
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle
I'm looking for a sample of how to style a list on the results returned from Sencha.
Do I need 100's of line of custom CSS, or are there some predefined styles I need to apply to make my app look native device like?
The default styling should look OK: at least, consistent with the rest of the Touch UI.
Simply provide an itemTpl: property and bind the list to a store: you should see the items appearing in a list like:
You can of course elaborate on the itemTpl as much as you like. There are also some 'standard' UI behaviors such as the disclosure buttons and index bars. See this screencast for examples: http://vimeo.com/19245335
And finally, of course, it's all just HTML & CSS, so you can go completely crazy with the styling if you want. Check: http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/
Use this to make it vertically center aligned always:
.x-list .x-list-item{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
In the default download of Sencha Touch there is a folder called Kitchen Sink in the demos. There's a basic css file in this demo that you can use as a starting point.
Also, you could give the list or nestedlist a class with the cls:'yourClass' and then, in the source of your project, check the nested divs and their classes...
Another option is to use style:'background-color:black;color:white;' inside the component to get basic styling.
Your best bet would be to check out the kitchen sink special css file as it's indented in a right way and very clear to beginners.