I have a basic btn-block btn-sm button in bootstrap that is at a fixed position using position:sticky; top:10px in my CSS. The problem is, the button doesn't show any hover effects, and you can't click on it, when the cursor is on the top half of the button. In addition, for a little but below the button, you can hover over it and the button shows hover effects, and when you click on it, a button click event is registered. It looks like the "clickable" portion of the button is offset by about 10px.
My other button(the Send button) doesn't seem to have this issue, so it looks like it has to do with the position sticky styling for that button.
Nobody else seems to have asked any questions similar to this, so I don't really even know how to get started with trying to find a solution.
Some of my code:
#latest-msg {
position: sticky;
top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card" id="chat-wrapper">
<div class="card-header text-left" id="chat-title">
Chat
</div>
<div class="card-body" id="chat-messages">
<button type="button" class="btn btn-primary btn-block btn-sm" id="latest-msg">Latest Message</button>
<!--^^^THIS BUTTON-->
<p id="no-msg" class="text-muted">No Messages Yet. Be the first!</p>
<!--Some text is appended here via javascript.-->
</div>
<div class="card-footer text-muted text-right hidden " id="footer-send">
<label for="name">Name:</label>
<input class="form-control" placeholder="Message..." id="name">
<button class="btn btn-primary btn-block" id="name-enter">Send</button>
</div>
<div class="card-footer text-muted text-right" id="footer-name">
<textarea class="form-control" placeholder="Message..." id="chat-msg-box"></textarea>
<button class="btn btn-primary btn-block" id="msg-send">Send</button>
</div>
</div>
Adding this to a javascript file shows that the button does get clicked.
You can also check it out here: https://codepen.io/anon/pen/bazLvp
document.getElementById('latest-msg').addEventListener('click', buttonClicked);
function buttonClicked() {
console.log('the button was clicked');
}
Related
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
My idea is to create a simple green button. No text, no border, just a green shape, which would inherit the size of col-md-12 from bootstrap. I have seen there are many similar questions, however I have a problem with basic understanding so I would appreciate if you would help me understand it.
<body>
<div class="col-md-12">
<button class="button" type="button" style="border:none; display:inline-block; color:green;"></button>
</div>
</body>
So, this is what I did. I have a body and I have a col-md-12 class. This is ok I guess. Then I decided to create a button. I have a button tag, class=button, type=button and I have a style > simple green color and inline-block to display this button over col-md-12. However! Nothing happens. May I ask why?
I don't want to put any sizes for purpose, I want just to fit whole col-md-12. May I ask what I don't understand correctly? Thank you.
Just add a class 'form-control' to button tag.
JSFiddle
<div class="row">
<div class="col-md-12">
<button class="btn btn-success form-control" type="button">Hello</button>
</div>
</div>
As said by j08691, you have to embed your columns inside rows for it to work properly:
<body>
<div class="row">
<div class="col-md-12">
<button class="button" type="button" style="border:none; display:inline-block; color:green;"></button>
</div>
</div>
</body>
But this wont be enough, because by default your button will not take the whole space, so you need to add a width: 100%; property on it:
<body>
<div class="row">
<div class="col-md-12">
<button class="button" type="button" style="width: 100%; border:none; display:inline-block; color:green;"></button>
</div>
</div>
</body>
Demo: https://jsfiddle.net/w1njoLL0/
Add w-100 to the button's class, e.g.:
<div class="mt-5 row justify-content-center">
<div class="col-3">
<button id="continue-button" class="btn btn-primary btn-lg w-100">
Continue
</button>
</div>
</div>
I have the following code here:
<div class="container-fluid">
<div class="row-fluid">
<div class="centering col-lg-8 topSection" style="text-align: center;">
<div class="col-lg-12" style="padding-top: 160px;">
<h2 style="color: #fff; font-size: 30px;">Get discovered - Discover - Connect</h2>
<h3 style="color: #fff; font-size: 23px;">We love everyting about music. The scene. The people. The livestyle. We live for it.</h3>
<button type="submit" class="btn_style_1 btn" data-toggle="modal" data-target="#myModalLogin">Sign in</button>
<button type="submit" class="btn_style_1 btn" data-toggle="modal" data-target="#myModal">Join now</button>
</div>
</div>
</div>
</div>
When I run the application, the buttons are not working. Nothing happens when I click on the buttons. The cursor Is not transformed to a pointer when I hover the buttons.
However, when I remove centering col-lg-8 topSection, the Sign in button works, but not the other button.
Have anyone had the same problem?
EDIT:
I had this In my Layout.cshtml:
<div class="col-lg-12">
#RenderBody()
</div>
When I removed the div, It worked.
Remove the type="submit" or replace it with type="button". Your solution would be:
<button type="button" class="btn_style_1 btn" data-toggle="modal" data-target="#myModalLogin">Sign in</button>
<button type="button" class="btn_style_1 btn" data-toggle="modal" data-target="#myModal">Join now</button>
I would like to horizontally align some code and a button.
For that, I am using the following code:
<div className="panel-heading">
<h2 className="panel-title headingText">Attributes</h2>
<button type="button" className="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
However, the two are not aligned(the button is the blue thing at the bottom, I would like it to be more central, just like the text):
How could I align the text and button horizontally?
You can apply Css to fulfill your requirement like this
.panel-heading, .headingText
{
display:inline-block;
padding:10px;
}
<div classname="panel-heading">
<h4 classname="panel-title headingText" style="float:left">Attributes</h4>
<button type="button" style="float:left;padding:10px" classname="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
This should Work. You can remove padding property
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?
Here is my code.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
Wrap the Button in div with "text-center" class.
Just change this:
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
add to your style:
display: table;
margin: 0 auto;
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
You can do it by giving margin or by positioning those elements absolutely.
For example
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
I tried the following code and it worked for me.
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
Check the link where you will find the center-block class
http://getbootstrap.com/css/#helper-classes-center
use text-align: center css property
Update for Bootstrap 4:
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
You could wrap the label and button with another div to keep them aligned with each other.
e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000
You can do the following. It also avoids buttons overlapping.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
It works for me
try to make an independent <div>then put the button into that.
just like this :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Then Go to to your CSSStyle page and do the Text-align:center like this :
#contactBtn{text-align: center;}
For Bootstrap 3
we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
I had this problem. I used
<div class = "col-xs-8 text-center">
On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button.
Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a
margin: auto;
which seems to have solved the problem.
or you can give specific offsets to make button position where you want simply with bootstrap grid system,
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
this way, also let you specify button size if you set btn-block.
sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.