Have styled a twitter bootstrap button to be centered in a thumbnail, and when the CSS is Inline (header or body) it works perfectly, but after moving the styles to an External stylesheet the button is left-aligned..
All the other styles that were inline and moved to an external sheet work perfectly..
Here's a bootply showing a centered-aligned button via an inline style:
http://bootply.com/65903
If you move the style to an external stylesheet, the button will not be centered..
Please advise!
Here's the CSS Style:
<style> #centered {text-align: center;} </style>
Here's the HTML:
<div class="full span8" id="centered">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" id="thumbnail-width">
<div class="thumbnail">
<div id="image"></div>
<div class="caption" id="caption-color">
<div id="header">
<h1>
Header
</h1>
</div><br>
</div>
<p>
<div class="btn-group">
<button class="btn btn">Button</button>
<button class="btn btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div><!--/View-->
</p>
</div>
</li>
</ul>
</div><!--/row-->
</div><!--/span-->
Try this:
<div class="full span8 text-center" id="centered">
Related
Edit2:
Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?
I'm pretty new to bootstrap and created a web page for learning purposes.
Everything is working pretty well so far, except the navbar.
This is my nav code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<form class="navbar-form navbar-left">
<button class="btn btn-default">ENTDECKEN</button>
<button class="btn btn-default">FINDEN</button>
<button class="btn btn-default">PLANEN</button>
<p class="font">
<b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
</p>
</form>
</div>
<div class="col-sm-2 ">
<div class="navbar-form">
<img src="../assets/aida.png" class="logo ">
</div>
</div>
<div class="col-sm-4">
<div class="navbar-form navbar-right">
<form action="#" style>
<div class="dropdown">
<img src="../assets/lupe.png" class="icons" />
<img src="../assets/telefon.png" class="icons" />
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Erste Aktion</li>
<li>Zweite Aktion</li>
<li>Noch eine Aktion</li>
<li role="separator" class="divider"></li>
<li>Ein Link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</div>
The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll.
Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.
Normal and scrolling up:
Scrolling down:
I hope you can see what I mean.
Does anybody know what I'm doing wrong?
(my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")
Thank you
Edit:
I have an image as the first item (after the navbar) that seems to cause the problems.
If I delete it, the navbar is working as expected.
Css:
.topimage{
height: 600px;
width: 100%;
align-self: center;
background-image: url("./assets/testbild3.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
and how I implemented it:
<div class="row">
<headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
<div class="topimage">
</div>
</div>
The fiddler link: (where it works without "jumping" navbar content)
https://jsfiddle.net/Biberium/g52cd6v8/
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I have an app that I'm building with Bootstrap 4. I need to center some icons underneath an image. I have a Bootply here. My code looks like this:
<div class="container">
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-3">
<img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
<br>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-twitter"></i></li>
<li class="list-inline-item"><i class="fa fa-google-plus"></i></li>
<li class="list-inline-item"><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-9">
<div><strong>Bill Gates</strong></div>
<p>
Here is some information about Bill Gates.
</p>
</div>
</div>
</div>
</div>
</div>
My question is, how do I horizontally center the three icons underneath my image so that it looks like a centered toolbar?
On your UL tag, remove the inline-list class, it's enforcing a float.
So what I'm trying to do is have my navbar automatically center to anything that's in it.
What I want is:
Logo all the way on the left (pulled left)
Button all the way on the right (pulled right)
Search bar directly in the center of the navbar
What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.
Here's my current code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
<div class="nav-collapse collapse">
<div class="span4 offset1">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
</form>
</div>
<ul class="nav pull-right">
<a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note:
The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.
Please help!
It should work as you've described, but that isn't what your code reflects.
Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).
you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/
.logo {
float:left;
}
I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.
Here's the screenshot:
Here's the code:
<div class="container">
<section>
<div class="page-header">
<h1 class="pull-left">
The header
</h1>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
Action
</li>
<li>
Another Action
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Contents
</section>
</div>
jsFiddle: http://jsfiddle.net/aurorius/PKrUC/
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
Option 1
http://jsfiddle.net/ypaL5nko/
<div class='page-header'>
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type='button' class='btn btn-primary'>Button Text</button>
</div>
</div>
<h2>Header Text</h2>
</div>
The button group is optional if you're only using a single button.
Option 2
http://jsfiddle.net/sLdnae3q/
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
Try this css code
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
Demo: http://jsfiddle.net/PKrUC/2/
Using a float disables te display:inline-block; property, making it float to the top.
Just add the bootstrap class text-right to the container to keep the vertical align intact.