Here is my HTML code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
add a div between them and give it proper height width and color
.line{
background-color:black;
height:20px;
width:3px;
}
.header-buttons{
display:flex;
justify-content:center;
align-items:center;
}
.btn{
margin: 10px
}
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.
Related
I am trying to make my two buttons appear on the far right of a piece of text. I want the text and two buttons to all be inline with each other but the text is on the left and the two buttons are on the right. I have seen multiple solutions and I could get it to work with only 1 button but when I have two buttons it does not work.
I run a for loop over 'weaknesses' and print out each weakness. Each weakness will have an update and delete action.
I tried to do margin-left but each weakness is a different length so my buttons would not line up
I also tried using some solutions from this post but could not seem to get the expected outcome: Place a button right aligned
Any help would be appreciated
HTML
<div *ngFor="let weakness of weaknesses | async">
<div class="flex-box">
<p>{{ weakness }}</p>
<a class="btn btn-light btn-sm pull-right" href="#">Update</a>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
Try this:
#btnHolder {
position:fixed;
top:10px;
right:10px;
}
<p>Text is here</p>
<div id="btnHolder">
<button>Update</button>
<button>Delete</button>
</div>
I dont know why it was so hard. It should have been easier to fix this problem.
One solution is auto margin with flex
nav {
display: flex;
align-items: center;
}
nav button:first-of-type {
/* Key here is margin-left needs to be auto */
margin: 0 10px 0 auto
}
<nav>
<span>Text</span>
<button>Button 1</button>
<button>Button 2</button>
</nav>
You should do it like this:
.flex-box {
display: flex;
align-items: center;
justify-content: start;
}
#buttons{
margin-left: 10px;
}
<div class="flex-box">
<p>Text is here</p>
<div id="buttons">
<a>Update</a>
<button>Delete</button>
</div>
</div>
Currently the button is always below the last element that exists in the view.
Then I add bottom: 2px and position: absolute to the button and it goes to the bottom, but when I open the drop-down the screen is enlarged and the button is not at the bottom.
It currently works like this. I want it to continue working like this, but with the button at the bottom
Placing bottom: 2px and position: absolute the button goes to the bottom but when the drop-down is opened it overlaps.
<style>
.card-one{display:flex;}
.card-section{display:flex;margin:5px;text-align:center; min-height:300px;background:#000; flex-direction: column; width:33%;color:#fff;}
.card-section h2{color:#fff;}
.card-section .book-btn{margin-top:auto;}
</style>
<div class="card-one">
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
</div>
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
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;
}
Inside this code
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider
floor="0"
ceiling="19"
dragstop="true"
ng-model-low="lowerValue"
ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
I have my bootstrap button created. The problem here is that it is positioned on the bottom left of my div. I want to put it on the top-right/center of the div, aligned with my title (h1). How do I position it where I want it? I'm new to bootstrap so I do not know about these workarounds. Thank you.
You can use bootstrap's classes to do this.
You can add pull-right class to float the button to the right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
</div>
Live example here.
As per your comments, for more precise control you can do this with absolute positioning instead.
You give the content element relative positioning and give the button absolute positioning. You can then use any combination of the top, right, bottom, and left properties to place it where you would like.
.content {
position: relative;
}
#right-panel-link {
position: absolute;
top: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
Live example here.
Making the bootstrap-button inside a div tag
you can create the bootstrap button inside a div and use align.
Example:
<div style="width:350px;" align="center">
<button type="button" class="btn btn-primary" >edit profile picture</button>
</div>