How do you go about making a navbar in Bootstrap that is non-collapsable and has a glyphicon button on the left without a border, text in the center and text on the right?
I know you can use pull-left and pull-right to move items to the left and to the right but when I try to add a glyphicon button to the navbar, it will become tiny and create a border around it.
Example of what I'm trying to accomplish:
Instead pull-left-right, use text-left-center-right. Try this:
HTML:
<div class="navbar navbar-fixed-top">
<div class="col-xs-4 text-left">
<i class="fa fa-chevron-left"></i>
</div>
<div class="col-xs-4 text-center">insertnamehere's room</div>
<div class="col-xs-4 text-right">0 -1</div>
</div>
CSS:
* {
font-size: 20px;
}
.pull-right {
text-align:right;
}
.navbar {
padding: 10px;
}
See Example.
Related
My HTML
<div class="col-sm-5">some content</div>
<div class="col-sm-1">
<button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="col-sm-6">some other content</div>
My css
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
color: #fff;
margin: 0px auto;
text-align: center;
font-size: 40px;
I want to make the plus button to come down. By the above codes it will come to the exact correct position however col-sm-6 sticks itself to the left because the button is absolute.
I'm using bootstrap 3
How can I fix this issue?
Thanks
Maybe try this.
<div class="row">
<div class="col-sm-5">some content</div>
//put all other content you want in a grid-1 here
</div>
<div class="row">
<div class="col-sm-12">
<button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="row">
<div class="col-sm-6">some other content</div>
//content for the remaining grid-2
This should probably make your design as
-- Grid 1
-- Plus Circle
-- Grid 2
The mistake you are doing is that you aren't following bootstrap grid convention here.
Also, For some reason, you haven't described class, ID, Tag on which you have added CSS.
Lastly, Make sure your CSS is below bootstrap CSS.
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 am trying to center the text and an image in two columns. But, I tried everything but I could not manage to bring then in the vertical middle position of a .row .
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
Can anyone help me with the css to align the text and the image in the middle I want to achieve the results shown in the image.
JSFIDDLE
.vertical-align{
vertical-align: middle;
}
img{
border:3px solid #2d2d2d;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" />
<span className="custom-input vertical-align">Filters</span>
</div>
</div>
You can make use of the Flexbox in this kind of situations, which is the best for use
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
.row {
display: flex;
align-items: center;
}
Hope this will help you.
( using Bootstrap 5 ) I have a button with an Image + text inside it.
Issue was in my case, I used a float-end on the image - which caused the text to behave like the image doesn't expand the button's height and therefore the text was vertical aligned but not to the image but rather to the button.
Removing the float-end made all child-elements vertical aligned.
Looking to have a title, subtitle and then two boxes close together and next to each other in the final third div.
Struggling to get 2 buttons to align in the centre next to each other. Seems fine in certain widths, but flows onto the next line at full width
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
My CSS
.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
display: inline;
padding: 0 20px;
}
.button-box {
width:100%;
text-align:center;
}
I already knew what you mean.
Here is the correct way to fix.
HTML
<div class="button-box col-lg-12">
About Us
Our Products
</div>
CSS
.button-box {
text-align:center;
margin-top:20px;
}
DEMO
You have to use boostrap class text-center
Use below like this,
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
<div style="text-align: center;">
About Us
Our Products
</div>
This works for me, the buttons are next to each other
Simplest Way to do in Bootstrap 4 and above / Two Button Inline.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>
</html>
By using Twitter Bootstrap 3.2.0 and a very nice snippet, I've created a menu-box with multiple choices.
For each menu item there is a label and a short description, as shown in figure below:
You could find an example with the code on JSfiddle.
Now, I'd like to:
Align menu-item content on middle (regarding the vertical-alignment);
Align the submit button on bottom-right.
Someone can suggest me how to do that?
1. Align menu-item content on middle (regarding the vertical-alignment):
I've recently used this excellent tutorial by #beaver82minimit that allows to create equal height columns bootstrap style: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
You can use it like this:
<div class="container container-xs-height">
<div class="row row-xs-height">
<div class="col-xs-6 col-xs-height"></div>
<div class="col-xs-3 col-xs-height col-top"></div>
<div class="col-xs-2 col-xs-height col-middle"></div>
<div class="col-xs-1 col-xs-height col-bottom"></div>
</div>
</div>
With the class col-middle you can center your content vertically.
2. Align the submit button on bottom-right
a) Add class bottom-right to the button and remove the wrapping <p>
<button type="button" class="btn btn-primary btn bottom-right" style="margin: 20px 0 0 0;"><span class="glyphicon glyphicon-log-in"></span> Submit</button>
b) Add this to your stylesheet:
.bottom-right {
position: absolute;
right: 0;
bottom: 0;
}
To prevent tab content to overlap with button, add padding-bottom to tab-content div:
div.bhoechie-tab-content{
background-color: #ffffff;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 54px;
}
Here is a demo: http://jsfiddle.net/LaBZP/3/
List-group-item vertical aligning middle:
.text-center {
display: table;
width: 100%;
}
.text-center > div {
display: table-cell;
vertical-align: middle;
}
Add divs under list-group-item to markup:
<a href="#" class="list-group-item idp-group-item text-center">
<div>
<strong>Label B</strong><br/>Label B Desc
</div>
</a>
Demo: http://jsfiddle.net/LaBZP/4/