I found this code where it can turn the cornes flat. It works well and all, but it turns everything straight. How do i just limit this to the accordion only. Ive try giving it an ID and applying to just that but it stops working when i do that. Can someone tell me the correct way. Thanks in advance!
* {
border-radius: 0 !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
you need to specify the target elements. For example:
#accordion, #accordion * {
border-radius: 0 !important;
}
The above code will apply the css rule to the accordion and all of it's children.
On a slightly different note, I'm not sure exactly why you're using !important in this instance.
Related
I found few questions related to this, but I'm totally new to WordPress and even some basic things are hard to understand, so I humbly ask not to close this topic immediately :)
I created my one-page website, put it on htmlblank5 theme and now trying to work my way on localhost WP. It seems all is working.
I don't understand the concept of making it dynamic in one page (though I understand the idea of how blog's work with pages and posts). So the question is how in general should I approach this "problem" and where to start.
Here are a few lines of my code:
expanding bootstrap buttons with a simple list and paragraph inside.
<div class="container">
<h2 id="Paslaugos" class="d-flex justify-content-center">xxxxxxxx</h2>
<div class="row">
<div class="col-lg-4 col-xm-12">
<p>
<a class="btn mygtukai" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">xxxxxxxxx</a>
</div>
<div class="col-lg-4 col-xm-12">
<button class="btn mygtukai" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">xxxxxxxxxxx</button>
</div>
<div class="col-lg-4 col-xm-12">
<button class="btn mygtukai" type="button" data-toggle="collapse" data-target="#multiCollapseExample3" aria-expanded="false" aria-controls="multiCollapseExample3">xxxxxxx</button>
</div>
</div>
</div>
</p>
<div class="row">
<div class="col-lg-4 col-xm-12">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
<h4 class="d-flex justify-content-center">xxxxxxxxxxxx</h4>
<ul class="kinas-teatras">
<li>xxxxxxx</li>
<li>xxxxxxxxx</li>
<li>xxxxxxxxx</li>
<li>xxxxxxxxxxx</li>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxx</li>
</ul>
</div>
</div>
</div>
Bootstrap cards about the projects done(some kind of portfolio)
<div class="container">
<h2 id="Darbai" class="d-flex justify-content-center">xxxxxxxx</h2>
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="img/hotel4.jpg" alt="Card image cap" title="Kalbėk">
<div class="card-body">
<h4 class="d-flex justify-content-center"><b>xxxxxxxxxx</b></h4>
<h5 class="d-flex justify-content-center darbaib"><b>xxxxxxxxxxx</b></h5>
<p class="card-text">xxxxxxxxxxxxxxxx</p>
<p class="darbaip card-text">xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</div>
</div>
These are just examples of what I'm working with. If needed I can post all HTML.
First you have to install a fresh wordpress site:
https://wordpress.org/support/article/how-to-install-wordpress/
Then, put your html code on themes/Twenty Nineteen/index.php inside
*Twenty Nineteen is the theme for default actually.
Thats all, you will see your website.
You need to learn wordpress to change the static data to dynamic
data, I recommend you learn about ACF Plugin and visit the Codex: https://codex.wordpress.org/Main_Page
good luck!
I'm using bootstrap with angular, but the panels aren't working correctly. I can confirm the files are in the right spots.files
This is what it looks like: result
I can use btn and btn-primary, but not panel. What could be causing this issue?
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<button class="btn btn-success">test</button>
</body>
</html>
If you are using Bootstrap 4 read this:
Panels, thumbnails, and wells
Dropped entirely for the new card component.
Panels
.panel to .card, now built with flexbox.
.panel-default removed and no replacement.
.panel-group removed and no replacement. .card-group is not a replacement, it is different.
.panel-heading to .card-header
.panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
.panel-body to .card-body
.panel-footer to .card-footer
.panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
.panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
.panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
.panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
.panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)
https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells
For Bootstrap 4, panels have been dropped in favour of cards
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
Hit: ctrl+shift+i or Right click and choose inspect then click on console to make sure you dont have issue and The bootstrab JavaScript file is called
and but that code in html file
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
but your bootstrap.js file at the end of body tag
i suggest you add a all panel items, i think you should add panel-heading and panel-footer and in addition to a container.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<div class="panel panel-default">
<div class="panel-heading">
<p>This a title</p>
</div>
<div class="panel-body">
Basic panel example
</div>
<div class="panel-footer">
<button class="btn btn-success">test</button>
</div>
</div>
</div>
</div>
</body>
I'm having a problem with properly formatting my bootstrap panels for printing. The charts being contained within the bootstrap panels overrun the panel border on the right side (only when I print though, everything looks fine on the actual web page) and the charts get split by page breaks. I've tried using print media queries and using page-break-inside and page-break-after but nothing is working (I could be doing it wrong though).
Here is my code utilizing the bootstrap panels. I'm also using Font Awesome for some interactive buttons and I'm using canvasJS for my charts.
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Work Orders by Priority
<a data-toggle="collapse" data-target="#collapse1">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer1" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">% of Work Requests with Repair Tags
<a data-toggle="collapse" data-target="#collapse2">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer2" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is what I had tried for my print media query to attempt to resolve the page break issue.
#media print {
div.panel, div.panel-primary {
page-break-inside: avoid !important;
page-break-after: auto !important;
}
}
I checked out this thread before coming here and followed along with it but it seems that the original poster was never able to get it working correctly either.
Printing Twitter Bootstrap correctly
Can anyone shed some light on to how this issue could be resolved?
Here is my problem. As you can see here they have used panel panel-primary, panel panel-green, panel panel-yellow and panel panel-red for the small panel views.
When I use panel panel-primary it is working just fine. But when I use other options, I get weird paled transparent colors. I tried panel panel-warning, panel panel-success and panel panel-danger as well but still the same. Only primary works. Any ideas?
I have 4 of these, exactly same with different text.
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="glyphicon glyphicon-stats" style="font-size:50px;"></i>
</div>
<div class="col-xs-9 text-right">
<div class=></div>
<div><h3>Statistics</h3></div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Show statistics</span>
<span class="pull-right"><i class="glyphicon glyphicon-arrow-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
The other panels except the primary one are not from bootstrap's css. I think they are user written.
Create your own class in your css file.
For example:
.panel-red{
background-color:#D9534F;
}
here is a jsfiddle
http://jsfiddle.net/borka/khaunb3q/
I have some center navigation that has always need to be in center, but that is not problem, the problem i have with some element that has to be always right of that element, how to add that this is what i have for now, it goes in accordian head
Here is boostrap 3 code
<div class="panel-heading">
<h4 class="panel-title text-right">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click Me
</a>
</h4>
</div>
What i need is something like this
The problem is that i dont know how many icons i would have, and they have always need to be at center of panel, and click me need to be at right?
If you want to achieve something like this, it is not very complicated. All you have to do is to set a default bootstrap accordion and set text-center insted of text-right. In this way if you place your icons they will be always aligned to center and after that you will use a <p style="float: right;">Click Me</p> in order to place your Click Me text in the right.
Here is the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<p style="float: right">Click me</p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
DEMO TEXT HERE.
</div>
</div>
</div>
</div>
As you can see, i used 3 icons in this example, but you can add as many as you want and they all will be center aligned.