I'm trying to get rid of the white margin/gutter in the popover, so that the yellow buttons span the entire width of the popover. How can I achieve this?
Code:
<button type="button" data-html="true" class="btn btn-secondary btn-sm btn mr-1 "
data-trigger="focus" data-container="body" data-toggle="popover" data-placement="bottom"
data-content= '<div style="display: none">
<ul class="list-group custom-popover ml-0 px-0">
<li class="list-group-item">Profile</li>
<li class="list-group-item">Logout</li>
</ul>
</div>'>
<?php echo 'popover menu'?></button>
To change styles of the popover you can use just CSS. The solution to your problem is just adding this to your custom css file.
.popover-body{
padding: 0px;
}
If you'll like to know all the styles that go into play when boostrap cretes the popover you can check them on the file named: _popover.scss in the folder you downloaded from boostrap.
Related
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
I'm trying to popup menu with Bootstrap 4 popover for category list.
My code below
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="no-bullet" id="categoryPopOverMenu">
<li class="nav-item dropdown">
#foreach($categories as $category)
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) ({{$category['movies_count']}}) #endif</a>
#endforeach
</li>
</ul>
And JS code below
$('[data-toggle="popover"]').popover({
trigger: 'focus',
html:true,
content : function() {
return $('#categoryPopOverMenu').html();
}
});
Please Look at below image and you can see at the left side of image my list has no bullets. Also you can see at right side of picture, a black bullet is appearing when i show my list in a popover
https://i.hizliresim.com/az01LB.png
Thanks inadvance.
Thanks for the replies. Below code working good
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="list-group" id="categoryPopOverMenu" style="padding:0px;display:none;width:70px;">
#foreach($categories as $category)
<li class="list-group-item list-group-item-info justify-content-between" style="padding:0px">
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) <span class="badge badge-default badge-pill pull-right" style="font-size:11px; font-weight:normal">{{$category['movies_count']}}</span>#endif</a>
</li>
#endforeach
</ul>
Obviously your css is overriding.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
See this link this might help you.
Visit Apply CSS to popover in Bootstrap
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I am trying to replace the indicators on a bootstrap carousel with text, almost like a navigation of sorts but have not successfully discovered how to do this even after hours of searching. I have found a lot of css options for customizing the indicators, but not a method for replacing them with text entirely. The text will be an identifying title for the carousel "slide". Naturally the code is
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
I would like to say I've tried a lot, but everything has been a shot in the dark and I knew it was going the wrong direction to begin with. I appreciate help in advance figuring this out.
This is how I did it:
HTML
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active">text1</li>
<li data-target="#carousel" data-slide-to="1">text2</li>
<li data-target="#carousel" data-slide-to="2">text3</li>
</ol>
CSS
.carousel-indicators li{
text-indent:0;
width:200px;
height: 40px;
border:none;
background-color: transparent;
}
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example