Align button to the right - css

I know this must be really simple but I'm trying to set a button to the right of the window using only bootstrap 4 classes. It must be in the same row as the text.
<html>
<head>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
The code is in here

Bootstrap 4 uses .float-right as opposed to .pull-right in Bootstrap 3. Also, don't forget to properly nest your rows with columns.
<div class="row">
<div class="col-lg-12">
<h3 class="one">Text</h3>
<button class="btn btn-secondary float-right">Button</button>
</div>
</div>

<div class="container-fluid">
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary ml-auto">Button</button>
</div>
</div>
.ml-auto is Bootstraph 4's non-flexbox way of aligning things.

You can also use like below code.
<button style="position: absolute; right: 0;">Button</button>

If you don't want to use float, the easiest and cleanest way to do it is by using an auto width column:
<div class="row">
<div class="col">
<h3 class="one">Text</h3>
</div>
<div class="col-auto">
<button class="btn btn-secondary pull-right">Button</button>
</div>
</div>

In my case I needed to align two or more buttons to the right, after several attempts this worked for me:
<div class="float-right">
<button type="button" class="btn btn-primary">First Button</button>
<button type="button" class="btn btn-secondary">Second Button</button>
</div>

try to put your script and link on the head like this:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>

Maybe you can use float:right;:
.one {
padding-left: 1em;
text-color: white;
display:inline;
}
.two {
background-color: #00ffff;
}
.pull-right{
float:right;
}
<html>
<head>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>

<v-btn class="float-right"> Download</v-btn>

The bootstrap 4.0.0 file you are getting from cdn doesn't have a pull-right (or pull-left) class. The v4 is in alpha, so there are many issues like that.
There are 2 options:
1) Reverse to bootstrap 3.3.7
2) Write your own CSS.

Related

How to place a button at the same height as a title to the right?

I would like to put my button at the top right at the same height as the title.
Here is an example:
enter image description here
My result for now
enter image description here
I think I have a problem with my divs? The button does not want to be placed at the top right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I've used 10 columns for the heading and 2 columns for the button and aligned the button right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<div class="row">
<div class="col-10 my-2">
<h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
</div>
<div class="col-2 my-2 text-right">
<button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
</div>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</div>
</body>
</html>
You could use position:absolute or float:right to make it in the right corner:
button{
position: absolute;
right:20px;
top:90px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
or use float:right:
button{
float: right
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>

Bootstrap 4: Columns fixed width + rest of line in card-footer

I've a bootstrap-4 card with a footer. Inside of the footer there is a (fixed-width) input field and a button. The button should expand to width:100% - width of the input field.
https://jsfiddle.net/aq9Laaew/224543/
input {
width:3rem;
}
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<div class="col-auto">
<input type="text" value="1" />
</div>
<div class="col-12">
<button>
Rest of width
</button>
</div>
</div>
</div>
How can it be done? As you can see in the fiddle, I tried to use col-auto, but this breaks the line with input+button into 2 lines.
You can use property css width: calc(100% - "width_your_button");
Or Bootstrap example:
<div class="card-footer">
<div class=" col-sm-2 col-xs-2 col-md-2 col-lg-2">
<input type="text" value="1" />
</div>
<div class=" col-sm-10 col-xs-10 col-md-10 col-lg-10">
<button>
Rest of width
</button>
</div>
</div>
First adding a d-flex class to the card-footer making it a flex container, plus adding the following CSS should solve the problem:
.card-footer button { flex: 1 }
The flex: 1 makes the button take the remaining space.
input {
width:3rem;
}
button {
flex: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer d-flex">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
It's better to use bootstrap columns to do this. (bootstrap 4)
Also you can use css calc() property. Refer below example.
/*CSS for Example 1*/
.ex-1 input {
float: left;
width: 3rem;
}
.ex-1 button {
display: block;
float: left;
width: calc( 100% - 3rem);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- Example 1 -->
<div class="card ex-1">
<div class="card-body">
<h5 class="card-title">Exxample 1</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<input type="text" value="1" />
<button>
Rest of width
</button>
</div>
</div>
<!-- Example 2 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Example 2</h5>
<p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col-2 pr-0">
<input type="text" class="form-control" value="1">
</div>
<div class="col-10 pl-0">
<button class="p-1 w-100">Rest of width</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

button is not appearing modal of bootstrap 4

I am trying to create a pop up using bootstrap 4 on angular 4,
<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
{{modalTitle}}
</div>
</div>
<div class="modal-body">
Username : <input type="text" placeholder="username">
<br>
<br>
Password : <input type="password" placeholder="*****">
</div>
<div class="modal-footer">
<button type = "button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
The problem is everything works on the modal and I able to see also all the texts and password only the button is going outside the modal area that too only the text rest anything of the button is not visible, but when I do
<input type="button" value="click me"> It works
Here's the image
Could anyone help please ???
It seems that your button has float: right on it. Your style file could be overriding bootstrap style.
You were missing a closing div tag in your code. Also, I suspect that you might be using an outdated version of Bootstrap 4 files (most recent is beta 3).
The most recent Bootstrap 4 version uses popper.js instead of tether.js.
Here's what I see when using your code (after adding the missing closing tag):
That looks pretty much the way you want it to, right?
Here's the code I used (including the most recent Bootstrap 4 files):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
{{modalTitle}}
</div>
</div>
<div class="modal-body">
Username : <input type="text" placeholder="username">
<br>
<br>
Password : <input type="password" placeholder="*****">
</div>
<div class="modal-footer">
<button type = "button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Navbar is not displayed

Why there is no navbar in the below snippet? Am I missing something? If yes, What?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I want like the below image:
Color is changed!
You missed .navbar-default, adding it will show the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
Update
Also for your information, <center> tag has been deprecated referring to MDN Web Docs
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
You could use text-align: center or in your case since you are using bootstrap if you want the same effect as <center> you could add the class .text-center to parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid text-center">
<button class="btn btn-large btn-success" onClick="window.print()">Print</button>
</div>
</div>
</div>
</div>
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>

How do I modify certain bootstrap elements?

I am developing a website for my high school's robotics team. I have 2 jumbotron elements but I need to modify one of the jumbotron elements without changing the other. How do I do this?
The site is www.robotichive3774.com
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team 3774 Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Abanoub Boules</h2>
<p>Team Captain, Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andre Bernardo</h2>
<p>Head Engineer, Assistant Captain</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Leo Scarano</h2>
<p>Head Coder, Head Web-master</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andrew Wojtkowski</h2>
<p>Coder, Web-master, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kenneth Rebbecke</h2>
<p>Engineer, Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kristen Kaldas</h2>
<p>Coder, Head Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Melanie Aguilar</h2>
<p>Secretary, Mascot</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Anish Patel</h2>
<p>Engineer, Head 3D Modelling</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Furhan Ashraf</h2>
<p>Financial Advisor, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
</div>
</div>
</body>
</html>
I need to have the jumbotron element on the top of the website to contain these elements but I can't have these elements applied to the second jumbotron.
.padding
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Add an id selector to the one you wish you single out, such as id="top-jumbotron"
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
Then apply the CSS using an ID selector, :
#top-jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Keep in mind that an ID must be unique on the page, meaning you can only have one #top-jumbotron, one #bottom-jumbotron etc. They are useful for singling out unique elements that need specific styles or other methods applied to them.
ID selectors are denoted by a hashtag # and must be unique to the page
Example: #top-jumbotron
Class selectors are denoted by a period . and can be applied to one or more elements on the page
Example: .jumbotron
Alternatively, you can single out the first .jumbotron class on the page by using the :first-child pseudo selector like this:
.jumbotron:first-child
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
However for your case I would recommend using a specific targeted ID so you know it's always being applied to the correct jumbotron.

Resources