Align Button in the Vertical Center and Keep it Stationary in Bootstrap - html

I currently have a bootstrap button that is vertically aligned in a column on the left of the screen. I am using the following code:
<div class="col-sm-1 align-self-center">
<button class="btn btn-primary" type="button">Button</button>
</div>
It looks exactly how I want it to on the page, but I recently noticed that as other modules expand the page downward (I have a collapsable panel in another column), this button shifts down as well. I suspect it continues to align itself with the center of the page as the page's height changes.
My question is whether there was a way to vertically align the button in the center as I currently do but also have it remain stationary should the length of the page change. Any suggestions would be greatly appreciated!

I think your issue requires using a wrapper around the element to give it a static reference in terms of its vertical center.
#wrapper {
height: 500px;
background-color: blue;
color: white;
}
#wrapper a {
margin: 0 auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="wrapper" class="row">
<a class="btn my-auto">Hello!</a>
</div>
<div class="row">
<p>
This is another row, but the one above is centered within the wrapper above.
</p>
</div>
</div>

Related

How to position an element inside the parent without using absolute [duplicate]

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I am trying to make a simple header for my webpage but I want to position my back button inside my div container such that it floats left but at the same time the "Header" text should appear in the center of the "parent div".
I tried using float left on my button but the problem is it makes the header text to wrap and the text appears off from the center of div(shifted right).
So, I tried using flex and arrived at the following code:
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<button class="btn btn-primary align-self-start">
Go back
</button>
<div class="align-self-center">
Header
</div>
</h2>
</div>
Using flex, the header appears like this:
But here, I want the button and header to be positioned besides each other. Hence, the text must be shifted up somehow.
Can someone suggest some better alternative to this approach or how this one can be fixed?
I understand that you want to have the button on the left of the "Header" text, making the parent as having center text-align and putting the button inside the Header div and making it float:left ensures that the Heading div is not going to block align.
Also, please note that background-color:red; and background-color:green; are just to demo how is appears
.container{
background-color:red;
text-align:center;
}
.align-self-center{
background-color:green;
}
button{
float:left
}
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<div class="align-self-center">
<button class="btn btn-primary align-self-start">
Go back
</button>
Header
</div>
</h2>
</div>

Vertically align left and right elements in Bootstrap

I use Bootstrap 3.3.7 and I wonder how to display:
Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline
Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Your problem is with the CSS, not the markup
The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.
The easiest way to fix this is to add
h1 {
margin: 0;
}
To your site's CSS.
Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.
Remove top margin from header element:
.page-header h1 {
margin-top: 0;
}

Why is child container affecting parent

I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}

Bootstrap control changes position height based on width of screen

I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/

Perfect center align horizontally with Bootstrap

There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.