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
Related
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>
JSFiddle: https://jsfiddle.net/yL9b2ewu/1/
In this fiddle I have 3 DIVs using Bootstrap 3.3.7 that are next to each other; each DIV is col-sm-3.
Each DIV contains a fixed-size button, then there should be a small amount of space under the button, and then optional explanatory text. Each DIV should end with a border at the same level as the lowest available DIV regardless of whether it has text or not.
One solution is to hard-code some <BR>s for the explanation section. In the 3rd DIV I could put in 4 fixed <BR>s. But this hackery doesn't seem right to me, there should be something dynamic and robust.
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
<br><br>No changes can be made after the recall is submitted.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
<br><br>Review or edit timeline before submitting.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
<br><br>
<!-- Can Insert <BR> here but wrong approach -->
</div>
</div>
I think that you could select only the last div using :last-child and add to it a bigger padding-bottom.
Give a class for the parent of the columns. Something like .colsParent.
Then, for the same breakpoint of Bootstrap #media, you set flexbox for this element.
#media (min-width: 768px) {
.colsParent {
display: flex;
}
}
By default, it fills the full height of the entire column.
Do not set display: flex inline, because it will affect the layout for devices smaller than the breakpoint above.
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.
For example I've made my button
<div class="btn btn-default">
Active
</div>
and it looks like the following
However I would like to have my button like this
How can I enlarge the width of the bootstrap button regardless of text size?
You can try to use btn-sm, btn-xs and btn-lg classes like this:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
}
JSFIDDLE DEMO
You can make use of Bootstrap .btn-group-justified css class. Or you can simply add:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
width:50%; //Specify your width here
}
JSFIDDLE DEMO
bootstrap comes with clas btn-lg
http://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block">
Active
</div>
but if you want to have the button of the width of your column / container add btn-block
<div class="btn btn-default btn-lg">
Active
</div>
However this will expand to 100% so make surt ethat you will wrap your button in certain amount of columns e.g. then you know its always stays 3 columns until xs screen
<div class="col-sm-3">
<div class="btn btn-default btn-block">
Active
</div>
</div>
You can add your own css property for button size as follows:
.btn {
min-width: 250px;
}
Default Bootstrap size classes
You can use btn-lg, btn-sm and btn-xs classes for manipulating with its size.
btn-block
Also, there is a class btn-block which will extend your button to the whole block. It is very convenient in combination with Bootstrap grid.
For example, this code will show a button with the width equal to half of screen for medium and large screens; and will show a full-width button for small screens:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
<button class="btn btn-group">Click me!</button>
</div>
</div>
Check this JSFiddle out. Try to resize frame.
If it is not enough, you can easily create your custom class.
Use block level buttons, those that span the full width of a parent
You can achieve this by adding btn-block class your button element.
Documentation here
Just simply add to the class of the bootstrap code.
.login
{
width: 20%;
margin-top: 39.5%;
margin-left: 35%;
}
<button type="button" class="btn btn-outline-dark btn-lg login">Login</button>
you can also use the css property scale for this
<button type="button" class="btn btn-primary " style="scale:1.5">Active</button>
Or just build a Class
.scale15{
scale:1.5;
}
http://jsfiddle.net/dazzafact/aj1hcsty/1/
This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.