This is what I will like to accomplish inside the CKEditor with Drupal 8.3.3.
I know I can just copy and paste it in plain HTML and it will work.
But I will like to see if there a solution inside the CKEditor to build something like this manually.
<div class="tab">
<div class="tab-content">
<h4>100%</h4>
<h4>85%</h4>
<h4>76%</h4>
<h4>37%</h4>
<h4>68%</h4>
</div>
</div>
We need to install Div Container Manager plugin for CKEditor drupal 8.
https://www.drupal.org/sandbox/toegristle/2821859
Related
I want to use CSS Grid to make 3 columns in the head section:
1-title section
2-logo section
3-telefoon number section
for my WordPress theme.
so I like to know where I have to paste this CSS grid HTML(container) code in WordPress theme. this is the HTML code of CSS grid as an example:
<div class="grid-container">
<div class="grid-item1">title</div>
<div class="grid-item2">logo</div>
<div class="grid-item3">telefoon number</div>
</div>
do I have to paste this HTML code in header.php or in page section of WordPress theme (with code editor)
or it can both, if yes which method is more professional?
im not familiar with wordpress yet but as for the CSS code you can set alter the position of your content to align them the way you want it to.
you can set the 1-title to float to left 2-logo align center and 3- telefoon float right.
thanks let me know if it worked or not :P
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>
Currently I am working on huisartsendorpsstraat.zoetermeergezond.nl/care-practicioners to toggle the workers divs.
What I am trying to accomplish is to only show a maximum of 9 workers, after that a button displays with the show more workers text.
Getting the button ain't no problem, just added it in the footer of the view, but to make it toggle the divs it ain't just not working.
I made sure a .js file is being called from the theme.php file of the theme.
I ain't no Drupal expert, so I am sorry if I am asking stupid questions here.
Has anyone found a way to toggle the divs created inside a view?
Layout:
<div class="views-row views-row-1 views-row-odd views-row-first"></div>
<div class="views-row views-row-2 views-row-even"></div>
<div class="views-row views-row-3 views-row-odd"></div>
<div class="views-row views-row-4 views-row-even"></div>
<div class="views-row views-row-5 views-row-odd views-row-last"></div>
thanks a bunch
I would recommend using one of these modules:
https://www.drupal.org/project/views_load_more
https://www.drupal.org/project/views_show_more
They both do same thing basicly -> there are some slight differences. Personally i use the first one. It's quick and easy to set up, no additional custom JS needed. Just install, enable, change your views footer to Views Load More and configure. Good luck!
I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/