This question already has answers here:
How to center text inside anchor tag
(7 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 days ago.
I have a hard time centering the text inside a Bootstrap button. Here is what I tried
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>
The result is shown in picture:
Any tip on how to fix that?
You can use a button that acts as a link instead.
<button class="btn btn-primary"
style="height: 200px; margin-bottom: 150px; font-size: 3rem; font-weight: bold;"
onclick="window.location.href = 'all-listings.html';">
Browse All Listings
</button>
Add style="text-align: center;" to the container div.
<div class="d-grid gap-2 col-6 mx-auto" style="text-align: center;">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>
Bootstrap buttons already have their text centered by default so you should be able to just apply the class btn btn-primary and it should do. No need to add anything else, just check that you're not overwriting the bootstrap styles with your own styles.
For more info check the documentation on the bootstrap website.
<a class="btn btn-primary text-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
You can use text utility within bootstrap
Related
<div class="col-md-3 bg-primary p-1 align-content-center text-center mb-5">
<div class="container bg-light sticky-top jumbotron" role="group">
#foreach (var item in Model.Data)
{
<div class="row mb-1">
<a class="btn btn-secondary flex-fill" asp-action="Index" asp-controller="Search" asp-route-query="#item">#item</a>
</div>
}
</div>
</div>
I'm dynamically adding buttons into the column. But text inside button might be wider than column, and then it can go further and beyond the screen.
How to ensure that text inside button will break before getting out of the column?
I have tried class with word-wrap: break-word inside <a> which works for text inside paragraph but not here, and I'm kind of lost.
It lools like your a element overflows its container.
So try to create a class and apply it to your button:
.foo {
word-wrap: break-word;
width: 100%;
white-space: normal;
}
and:
<div class="row mb-1">
<a class="btn btn-secondary flex-fill foo"
asp-action="Index" asp-controller="Search" asp-route-query="#item">#item</a>
</div>
A fiddle example can be seen here
Maybe try use:
a {display: inline-block; max-width: 100px; vertical-align: middle;}
word-wrap: break-word work only with display (inline & block)
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.
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/
I'm trying to put two buttons one inside the other with html. I have tried this:
<div id="photoShow" style="width: 190px; height: 212px">
<input type="button" runat="server" id="btn_ShowImage" style =" background-image: url('photos/Analog50.jpg'); width: 55px; height: 54px;"
onclick="return btn_ShowImage_onclick()" /><asp:Button
ID="btn_AddProductToReservation" Height="180px" Width="194px"
runat="server" style="margin-top: 0px; margin-left: 0px;" />
</div>
Would love to get some help, Thank you
put them in a div like that:
<div style="float:left"><button></button><button></button></div>
so you can put them aside eachother, there is no sense putting buttons in each other!
if you use twitter bootstrap you can put those buttons one inside another:
<div class="btn btn-primary btn-large">
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
</div>
and it will render as expected