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>
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>
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
I have a question that has been surely asked 10000 times already but I don't really understand the answers.
I want to make something simple : divide my screen in 3 columns, add some buttons on the 1 column, a google map in the second one and other buttons in the 3rd one.
How can I manage to do that properly?
For moment I added the buttons where I wanted, but when it comes to manage the map, I have problems usually with the size.
<div class="container">
<div class="row">
<div class="col-lg-4">
<button type="button" class="btn btn-primary btn-lg">1</button>
<button type="button" class="btn btn-default btn-lg">2</button>
</div>
<div class="col-lg-4">
<div id="map-container" style="width: 500px; height: 300px;"></div>
</div>
<div class="col-lg-4">
<form class>
<b>Point A : <input type="text" class="form-control"></b>
<b>Point B : <input type="text" class="form-control"><b>
<button>Validate</button>
</form>
</div>
</div>
<div class="row">
<br></br>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="button" class="btn btn-success sharp">Good</button>
<button type="button" class="btn btn-warning sharp">Normal</button>
<button type="button" class="btn btn-danger sharp">Bad</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
You should set the map height style, but not the width. Also you should set:
#map-container img {
max-width: none;
}
See this question on stackoverflow for more information.
I am working on a bootstrap 3 project at the moment and i have added a button called "Add Shipment, i want this button to stay fixed to the right hand side of the panel but when I give it the style of float:right or class of pull-right, it doesn't work.
The design must be responsive so therefore I cannot just give it a class of float: left and then put margin-left: XXX
Please let me know if you know how to solve this, the code and screenshot are below.
<div class="row" style="margin-top:-20px;">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-primary panel-table" style="border-radius:50px">
<div class="panel-heading" style="background-color:#EFEFEF; border: 1px solid #CCCCCC; height:45px; width:auto">
<div class="panel-title" style="padding:0; width:auto" >
<div class="input-group input-group-sm" style="width:200px; margin-top:7px; margin-left:10px; float:left">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" placeholder="Filter">
</div>
<div class="btn-group" style="float:left; margin-left:25px; margin-top:6px">
<button type="button" class="btn btn-default">All</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-road"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<button class="btn btn-info" style="margin-top:6px; float:right">Add Shipment</button>
</div>
</div>
<div class="panel-body" style="background-color:#F2F2F2; border: 1px solid #CCCCCC; height:200px">
</div>
</div>
</div>
Current screenshot of results from that code:
I tried copying and pasting your code to see how things look, and it looks fine. I see that the Add Shipment button is pulled to the right. You must have something in your CSS stylesheet that is preventing the button from being floated to the right
i have some problems with Bootstrap. i centered form and button by using span6 offset3 and don't know how to center button under this form right now. i tried with text-align: center but still it's more on the left.
<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
<input class="input-xxlarge" type="text" placeholder="Email..">
<p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
</form>
</div>
</div>
</div>
Remove that <p> tag and add the button inside a <div class="form-actions"> like this:
<div class="form-actions">
<button type="submit" class="btn">Confirm</button>
</div>
an then augment the CSS class with:
.form-actions {
margin: 0;
background-color: transparent;
text-align: center;
}
Here's a JS Bin demo: http://jsbin.com/ijozof/2
Look for form-actions at the Bootstrap doc here:
http://twitter.github.io/bootstrap/base-css.html#buttons
With Bootstrap 3, you can use the 'text-center' styling attribute.
<div class="col-md-3 text-center">
<button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
If you're using Bootstrap 4, try this:
<div class="mx-auto text-center">
<button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
Width:100% and text-align:center would work in my experience
<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
Try adding this class
class="pager"
<p class="pager" style="line-height: 70px;">
<button type="submit" class="btn">Confirm</button>
</p>
I tried mine within a <div class=pager><button etc etc></div> which worked well
See http://getbootstrap.com/components/ look under Pagination -> Pager
This looks like the correct bootstrap class to center this, text-align: center; is meant for text not images and blocks etc.
I do it like this <center></center>
<div class="form-actions">
<center>
<button type="submit" class="submit btn btn-primary ">
Sign In <i class="icon-angle-right"></i>
</button>
</center>
</div>
You can use this
<button type="submit" class="btn btn-primary btn-block w-50 mx-auto">Search</button>
Look something like this
Complete Form code -
<form id="submit">
<input type="text" class="form-control mt-5" id="search-city"
placeholder="Search City">
<button type="submit" class="btn btn-primary mt-3 btn-sm btn-block w-50
mx-auto">Search</button>
</form>
Using Bootstrap, the correct way is to use the offset class. Use math to determine the left offset. Example: You want a button full width on mobile, but 1/3 width and centered on tablet, desktop, large desktop.
So out of 12 "bootstrap" columns, you're using 4 to offset, 4 for the button, then 4 is blank to the right.
See if that works!
With Bootstrap you can simply use class text-center:
<div class="container">
<div class="row">
<form>
<input class="input-xxlarge" type="text" placeholder="Email..">
</form>
<div class="text-center">
<button type="submit" class="btn">Confirm</button>
</div>
</div>
</div>
DEMO
Try giving default width, display it with block and center it with margin: 0 auto;
like this:
<p style="display:block; line-height: 70px; width:200px; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
It's working completely try this:
<div class="button pull-left" style="padding-left:40%;" >