i am trying to use justify-content to put one button at the beginning of a div and another button at the end,
but i noticed that justify content is only working if called on the div not the btn itself, so below is what i have written which i know does not work.
any tips would be highly appreciated
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
<title>Container justify</title>
<div class="d-flex justify-content">
<button class="btn justify-content-start btn-default">button1</button>
<button class="btn justify-content-end btn-default">button2</button>
</div>
You need to use the correct classes on the parent, in this cae .justify-content-between.
Bootstrap 4 Layout Utiltites
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between">
<button class="btn btn-default">button1</button>
<button class="btn btn-default">button2</button>
</div>
You can do this in a more used manned using inline-block elements as follows:
.d-flex {
display: inline-block;
width: 100%;
}
.justify-content-start {
float: left;
}
.justify-content-end {
float: right;
}
You can change the classes in you html page if needed, I just used the ones you had provided.
Related
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>
I am new to bootstrap and learning new things and i am trying to bring the bootstrap button to center of the screen at bottom position so far my code is
.bottom-center {
position: absolute;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class='bottom-center'>
<button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>
there is no need for any additional CSS to achieve that.
First Thing: use bootstrap 4 instead of 3. (bootstrap 3 is getting too old)
add class fixed-bottom to the button container to make it at the bottom of the screen.
add d-flex justify-content-center to the the button container to make it centered
read more about flex property in bootstrap here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class="fixed-bottom d-flex justify-content-center">
<button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>
Kindly help and let me know where am i making the mistake as i can not make the options in the navbar go into the right side. Here i am sharing the code.
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="padding-left: 40px; padding-right: 40px;">
<div style="float: left;">
<a class="navbar-brand" href="homePage.php">Job Portal</a>
</div>
<div class="topnav-right" style="float: right;">
<a href="homePage.php">
<button class="btn btn-outline-success" type="button" >
Home
</button>
</a>
<a href="signinPageOfJobSeekers.php">
<button class="btn btn-outline-success" type="button">
Sign In or Sign up
</button>
</a>
<button class="btn btn-outline-success" type="button">
Contact Us
</button>
<?php if(!empty($_SESSION['userName'])){ ?>
<a href="logOut.php">
<button class="btn btn-outline-success" type="button">
Log Out
</button>
</a>
<?php } ?>
</div>
</nav>
</div>
Your code is not enough to give you a perfect solution. However, here is my shot:
I assume that the wrapper container <div> ... </div> you have spans 100% of the viewport width? If this is the case, you can add the following style attribute:
<div style="display: flex; justify-content: flex-end;">
<nav>
// rest of the HTML code in your example
</nav>
</div>
Of course, for a cleaner solution, instead of adding an inline style attribute, you can add a CSS class and style it in a separate stylesheet file or style tag in your document <head>:
<div class="nav-wrapper">
<nav>
// rest of the HTML code in your example
</nav>
</div>
and then in your CSS declarations
.navWrapper {
display: flex;
justify-content: flex-end;
}
Alternative solution
If you are okay with your navigation overlapping the rest of the page content, you can always position: fix it. This way it would be taken out of the document flow and overlayed on top of the other HTML elements on your page. Here is the CSS needed:
.nav-wrapper {
position: fixed;
top: 0px;
right: 0px;
z-index: 999; // <- increase this value if any elements are on top of your nav
}
Have you considered using a flex box?
https://www.youtube.com/watch?v=K74l26pE4YA
Flex box is super useful for things like positioning and layout of items in a list. Check out some of the ways you can justify content: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Also, each individual, item can be aligned with align-self.
It's a fairly powerful way or organizing content. We can't see all of your css at the time of answering this question, but I'd take a look at the first video if you aren't already using a flexbox or to see how it works if you have a bug with one. It might work for you in this case!
I noticed there are similar questions however I tried the given solutions and nothing worked *
My custom CSS file is 100% linked correctly to the html file I'm working on *
I'm using Bootstrap v4.3.1 *
So as the title suggests, I'm trying to align text inside a Bootstrap button - I need to do that using my own custom CSS file.
I've created my new style.css file and linked it in the header (AFTER the Bootstrap CSS link), then I added a custom class (btn1) to my Bootstrap button:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I then added the following code in my CSS:
.btn1{
text-align: left !important;
}
But the text on the button is still not aligned to the left. Any insights as for why it happens, and ways to solve the problem?
Thanks!
You will need to change the padding on your custom css to 0, as this is still picking up the bootstrap padding. Then you can set the width to whatever size you like and add custom padding if you wanted.
Example:
.btn1{
text-align: left !important;
padding: 0;
width: 50px;
}
Buttons in bootstrap are inline-block elements and do not have defined width. Therefore, text-align: left does not work.
You need to specify width of it explicitly and use align-left. And if you need to remove event the left padding, use pl-0.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col">
<button class="btn btn-primary pl-0">Button</button>
</div>
<div class="col">
<button class="btn btn-primary w-100 text-left">Button</button>
</div>
<div class="col">
<button class="btn btn-primary pl-0 w-100 text-left">Button</button>
</div>
</div>
</div>
https://codepen.io/anon/pen/MMgxKz
Try this way 👇
.btn.btn1{
text-align: left;
min-width:250px;
}
note this way you don't need to add !important
I'm tring to make a little toolbar right next to a header. So I thought list-inline ought to work pretty well. And it works, but the alignment is off and I can't seem to figure it out.
<ul class="list-inline">
<li><h3>Editor</h3> </li>
<li><div class="btn-toolbar editor toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">other</button>
</div>
</div>
</li>
</ul>
http://jsfiddle.net/yhaJG/1/
The following CSS might be what you're looking for. Hard to tell exactly what you want from the question though.
.list-inline { margin-top: 5px; }
.list-inline li { vertical-align: top; }
.list-inline h3 { margin-top: 6px }
Just adjust the margin-top values as needed.
JSFiddle: http://jsfiddle.net/yhaJG/7/
Also, you might want to add another class to the ul element and apply the styles to that. You can still leave list-inline on the ul element, but that way these styles won't be applied to every list-inline since there may be other uses for inline lists on your site.