I'm learning bootstrap and using a carousel below two navbars.
Here is the fiddle:
https://jsfiddle.net/xneym8zq/
The problem is that there is a gap between the top of the carousel and the carousel-inner. I can see that the carousel is touching the navbar due to the carousel-control shadow but what I don't get is why is there a gap between the top and the image.
I've tried
.carousel-inner .item img {
position: relative;
top: -20px;
}
It works but what I want to know is why is there a gap? and which element is causing it? Is there some default css in bootstrap.css that I'm missing?
Thanks in advance.
Related
I'm working on a live mockup page but running into issues with the navbar showing on top of the logo image. I've researched for answers and tried them but are not working as expected. How can I fix it so the navigation isn't layered on top the logo? I'd also like to either adjust the nav to the top of page when in mobile size, logo becomes hidden or keep the logo visible on the navbar in mobile size. This will also require media query breakpoints to smooth the transition of desktop to mobile. I'm kind of new bootstrap. Any help is appreciated. Thanks
link to image mockup
link to live webpage mockup
link to css override
Looking at the live webpage mockup link, you have
.navbar-fixed-bottom,
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
the z-index is overlapping all of your elements.
add
position: relative;
z-index: 99999;
to your .row-img class
I am trying to get all my popovers to be vertically centered to the viewport. My project requirements prevent me from using a Bootstrap Modal which would be an easier choice.
So, the popover triggers on link click. Have set the link to
position: relative;
As for the Bootstrap popover div, it has been set to
position: absolute;
I have tried setting the body display to table-cell and the bootstrap popover div to table-cell and vertical-align: middle; but nothing works.
Unable to give you guys an example code. Any help is much appreciated.
position: absolute;
Is positioning based on the parents element with position relative, absolute or fixed.
Remove the link it's position: relative; or try position: fixed instead of absolute.
I have used bootstrap 3 carousel and the images inside it were not getting resized accordingly.
After making this chage:
.carousel-inner > .item > img {
min-width: 100%;
width: 100%;
}
As shown in:
Make bootstrap carousel responsive on height
It worked perfectly.
Would it be a bug or after making this change I will suffer some side effect?
This is not a "BUG".
Bootstrap carousel doesn't handle correctly pictures that have not the same size.
Here is a good tutorial that give a solution to the problem.
I am trying to accomplish this:
http://unity3d.com/community
A full width header image under the navbar: what's the best Bootstrap 3 approach to accomplish this?
I was able to move the jumbotron outside the main container using this tutorial:
http://www.tutorialspoint.com/bootstrap/bootstrap_jumbotron.htm
Now the challenge is to move the navbar back to it's original position at the top of the page (it is currently displayed just after the jumbotron)
Thanks.
Try adding up some custom CSS and HTML:
HTML:
<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/
CSS:
.background-image {
height: 400px;
background-image: url('community.jpg');
width: 100%;
position: absolute;
top:0;
z-index: -100;
}
After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.