I am having a simple bootstrap popover and I have placed it inside panel body. It works great when I place popover outside the panel body. But I am not sure why it is not working when I place same popover inside panel body.
PopOver Inside Panel Body
<div class="row">
<div class="col-md-12">
<div style="border:1px solid black; margin-top:5px; margin-bottom:5px;">
<input id="rbtnTab1" type="radio" name="tabs" checked>
<label id="lblTab1" for="rbtnTab1">Tab 1</label>
<section id="content1">
<div>
<div class="col-xs-4 col-md-offset-4">
<div class="panel panel-default" style="margin-top:10px">
<div class="panel-heading text-center" style="font-size:15px;font-weight:bold; background-color:#4D94CE; color:white;"><i class="fa fa-users" style="font-size:x-large"></i><br />Panel Heading</div>
<div class="panel-body text-center" style="height:60px;font-size:15px">
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
</section>
</div>
</div>
</div>
JQuery code for bootstrap popover
$('[data-toggle="popover"]').popover({
placement: 'top',
trigger: 'hover'
});
Popover outside the panel (This works great)
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
Related
I have some buttons "the ones with information icon, and I want to align them so that to be arranged under each other vertically
image_1 shown the current alignment of the buttons.
Please let me know how to achieve aligning them vertically under each other using CSS and HTML
I thought of setting an equal margin to the left side starting from the check-box but I do not know how to do it
HTML markup:
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGGREGATED_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGRICULTURAÖ_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_WATER_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
img_1:
You can use Bootstrap classes such as row and column. So the layout would like this.
Read more about Bootstrap Grid system
<div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
From the image I assume the box has a fixed width. You can use this as your limit and add an inline span between the text and the button and set it's width to fill the remaining available space. That should push the buttons to the right side.
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>
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 am attempting to center the search bar in my navbar. I am using bootstrap, I tried text-center on the md-4 but it had no effect.
Here is a link to my code.
http://bootsnipp.com/snippets/50b38
Bootstrap uses a grid of 12 columns. Your code had the first column be 8 and the 2nd one be 4. This would mean that your first column would be 2/3 of the page. By making it col-md-4, it allows your middle div to be center.
<div class="row top-header">
<div class="container">
<div class="col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="col-md-4">
<div id="search-center">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Here is an updated source:
http://bootsnipp.com/user/snippets/E7WgX
over your code in css tag, i put that and seems ork
.top-header {
background-color: #D9D9D9;
text-align:center;
}
Expect it help you
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>