I am attempting to vertically center a search bar in my websites navigation. I've tried adding a div around the search element and adding text-center to it. I have also tried margin: 0px auto !important;. None of which seemed to have any effect on the element.
I have created a bootsnipp
http://bootsnipp.com/snippets/E7WgX
Try to this
.top-header {
background-color: #D9D9D9;
}
.media-body{
vertical-align: middle !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row top-header">
<div class="container">
<div class="media">
<div class="media-left">
<img class="media-objects" src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="media-body">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Vertical align is a difficult topic and the correct solution is very dependent on the used layout. If the snippet layout is what you use I would suggest adding these styles to columns. To get vertical-align: middle css working, you need to disable floating of columns and to keep them inline add display: inline-block. So apply to both columns class float-disable, then add vcenter to column containing search. Css styles looks like this:
.float-disable{
float: none;
display: inline-block;
}
.vcenter{
vertical-align: middle;
}
Related
I have a problem with button text. when I resize, its text remains no more in center on some screen sizes as in these images.
In iPad, it is good
In iPhone, it is ugly, not centered position
Html
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
background-color: red;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Please let me know what should I make right to do it right.
Regards
The solution is simple: If you don't try to prevent the native Bootstrap 4 classes from working by applying custom css that breaks them, then adding the text-center class is all you need.
Here's a code snippet that shows this class perfectly doing its job:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
However, if you start adding css hacks that break Bootstrap, then, of course, you'll need even more css hacks to fix the problems caused by the original css hacks.
In this case, I recommend going back to square one, removing all of your custom css and using native Bootstrap 4 classes to accomplish what you need because native Bootstrap 4 classes can do almost everything you'll ever need in terms of layout. No need for any css hacks.
I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?
This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}
I'm having trouble figuring out why my jumbotron container is covering the entire page. I am trying to have the jumbotron stop right before "Find your university".
Second, I am also having trouble with moving the search bar to the middle of the jumbotron. Can anyone help? I'm new to HTML, CSS and Bootstrap.
HTML:
<div class="center jumbotron">
<div class="container">
<h1>MOVE ABROAD WITH EASE</h1>
<h2>Find out about the cities, where to live and eat, hangout groups.</h2>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-6">
<input type="text" class=" search-query form-control" placeholder="Which city are you moving to?" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.center {
text-align: center;
}
#custom-search-input {
margin: 0;
margin-top: 50px;
margin-bottom: 50px;
padding: 10;
}
Your jumbotron is likely filling your page because you have all your content inside of it. Just move everything from Find Your University and below out of it.
As for centering your input, Bootstrap provides the col-xx-offset-# concept to help with this.
Here's a Fiddle with your code updated to illustrate.
Some additional notes and pointers:
padding: 10; is invalid css (possibly just a typo). make sure to include px if that was your intention.
Creating your own .center class is unnecessary. Bootstrap comes with a .text-center class for this purpose.
I'd like to center a vertically aligned button in a div using bootstrap
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.
You can use display:inline-block and vertical-align:middle:
.col-xs-2, .col-xs-10 {
display: inline-block;
float: none;
}
.col-xs-10 {
vertical-align: middle;
}
Here's a demo fiddle.
Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answer for more information on that.
I used this. Check the "style property". That will do the trick.
style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>
<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>
The problem is that the padding on the H4 is more than the button. You can wrap you button inside the H4 (perhaps not the best practice), or change the button padding in your CSS..
<div class="row">
<div class="col-xs-2">
<h4>
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
</button>
</h4>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
OR, leave the button as is, and apply this CSS to the H4..
h4 {
margin-top: -0.5em;
}
http://bootply.com/106259
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>