Skip Navigation
Buy Now

Home › Toolset Professional Support › [Resolved] Using bootstrap cards grid instead of bootstrap grid

[Resolved] Using bootstrap cards grid instead of bootstrap grid

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the customer wanted to know if he could use the bootstrap 4 Card Grid options with Views.

Solution:
Currently toolset uses bootstrap 3 and you would need to manually add bootstrap 4 to your site in order to use the new Cards setup.

This support ticket is created 6 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: ,

This topic contains 7 replies, has 2 voices.

Last updated by thibautF 6 years, 11 months ago.

Assisted by: Shane.

Author
Posts
#600475

thibautF

Hello,

I am currently using the bootstrap grid for the layout of my articles.
I would rather use the bootstrap map grid for its frame and image possibilities.
Is it possible?
When I try to use it, I can not display the outline.
Can you help me ?

like : hidden link

Example of use : hidden link . Each part is a cell I would like to frame

#600646

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi

Thank you for contacting our support forum.

It seems that this cards grid is only available in bootstrap version 4. Currently toolset uses bootstrap 3 and you would need to manually add bootstrap 4 to your site in order to use the new Cards setup.

Thanks,
Shane

#600652

thibautF

Ok thx.

So, how can i show border for my cell ?

#600664

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

You can add the bother with a little bit of css.

Take a look at the link below and let me know if it helps.

hidden link

Thanks,
Shane

#600812

thibautF

Hi,

Thx for answer.
I could find interesting information, but not a solution.
When i try to create a CSS and apply it to all the post...

CSS :

bordure {
    border: 2px solid dark;
    border-radius: 5px;
  	background-color: rgba(128,128,128,0.15);
  	padding: 3px 3px 3px 3px;
}

Content :

<bordure>
<div class="row">
	<div class="col-sm-12">
		<div class="row">
			<div class="col-sm-4">
            	<img src="<em><u>hidden link</u></em>" width="180" height="180" class="size-medium" />
          	</div>
			<div class="col-sm-8">
				<h1><center><b>[types field='cf_nom-du-built'][/types]<br />par [wpv-post-taxonomy type="s_nom-pseudo" id='cpt_fiche-id-drone']</b></center></h1><br/><h5><center>([wpv-post-taxonomy type="s_etat"])</center></h5>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-3">
				<h5>Drone [wpv-post-taxonomy type="s_type-d-utilisation"]<br />Dimension :<br />[wpv-post-taxonomy type="s_dimension-du-chassis" id='$cpt_frames']<br />Poids : [types field='cf_poids-du-built' format='FIELD_VALUE'][/types]</h5>
			</div>
			<div class="col-sm-3">
				<h5>Moteur [wpv-post-taxonomy type="s_type-de-moteur" id='$cpt_moteur']<br />[wpv-post-taxonomy type="s_taille-des-moteurs" id='$cpt_moteur'] de [wpv-post-taxonomy type="s_kv-des-moteurs" id='$cpt_moteur'] KV<br />Hélices [wpv-post-taxonomy type="s_nombre-de-pales"] [wpv-post-taxonomy type="s_taille-des-helices" id='$cpt_prop']<br />Batterie [wpv-post-taxonomy type="s_nombre-d-elements" id='$cpt_batterie']</h5>
			</div>
			<div class="col-sm-3">
				<h5>VTx [wpv-post-taxonomy type="s_marque-du-vtx" id='$cpt_vtx']<br />[types field='cf_modele-du-vtx' id='$cpt_vtx'][/types]<br />de [types field='cf_puissance-du-vtx' format='FIELD_VALUE' separator=', ' id='$cpt_vtx'][/types] mW</h5>
			</div>
			<div class="col-sm-3">
				<h5>Caméra FPV [wpv-post-taxonomy type="s_marque-de-la-cam-fpv" id='$cpt_cam-fpv']<br />[types field='cf_modele-de-cam-fpv' id='$cpt_cam-fpv'][/types]<br />de [types field='cf_resolution-de-la-cam-fpv' format='FIELD_VALUE' id='$cpt_cam-fpv'][/types] TVL</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
            	<center><b><u>[types field='cf_visuel-frame' width='150' height='150' resize='proportional' id='$cpt_frames'][/types]<br />Châssis</u></b></center><br />[wpv-post-taxonomy type="s_marque-chassis" id='$cpt_frames']<br />[types field='cf_modele-du-chassis' id='$cpt_frames'][/types]<br />[types field='cf_taille-du-chassis' format='FIELD_VALUE' id='$cpt_frames'][/types] mm<br />[wpv-post-taxonomy type="s_matiere-chassis" id='$cpt_frames']
			</div>
              <div class="col-sm-4">
              	<center><u><b>Moteurs</b></u></center><br />[wpv-post-taxonomy type="s_marque-des-moteurs" id='$cpt_moteur']<br />[types field='cf_modeles-de-vos-moteurs' id='$cpt_moteur'][/types]<br />[wpv-post-taxonomy type="s_type-de-moteur"]<br />[types field='cf_kv-moteurs' format='FIELD_VALUE'][/types] KV<br />[wpv-post-taxonomy type="s_taille-des-moteurs" id='$cpt_moteur']
              </div>
			<div class="col-sm-4">
              	<center><u><b>Hélices</b></u></center><br />[wpv-post-taxonomy type="s_marque-des-helices" id='$cpt_prop']<br />[types field='cf_modele-des-helices' id='$cpt_prop'][/types]<br />[wpv-post-taxonomy type="s_taille-des-helices" id='$cpt_prop']<br />[types field='cf_matiere-des-helices' id='$cpt_prop'][/types]<br />[wpv-post-taxonomy type="s_nombre-de-pales" id='$cpt_prop']
              </div>
		</div>		
		<div class="row">
			<div class="col-sm-4">
              	<center><b><u>FC</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-la-fc" id='$cpt_fc']<br />[types field='cf_modele-de-la-fc' id='$cpt_fc'][/types]<br />[wpv-post-taxonomy type="s_fc-aio" id='$cpt_fc']<br />[wpv-post-taxonomy type="s_fonctionnalite-incluse" separator="<br />" id='$cpt_fc']
          	</div>
			<div class="col-sm-4">
          		<center><b><u>ESC</u></b></center><br />[wpv-post-taxonomy type="s_marque-des-esc" id='$cpt_esc']<br />[types field='cf_modele-de-l-esc' id='$cpt_esc'][/types]<br />[types field='cf_amperage-des-esc' format='FIELD_VALUE'][/types] A<br />[types field='cf_fonctionnalites-de-la-fc' separator='<br />'][/types]
          	</div>
			<div class="col-sm-4">
          		<center><b><u>Batterie</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-la-batterie" id='$cpt_batterie']<br />[wpv-post-taxonomy type="s_nombre-d-elements" id='$cpt_batterie'] [types field='cf_nombre-de-mah' format='FIELD_VALUE' id='$cpt_batterie'][/types]mAh [types field='cf_nombre-de-c' format='FIELD_VALUE' id='$cpt_batterie'][/types]C<br />[types field='cf_serie-de-la-batterie' id='$cpt_batterie'][/types]
          	</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
              	<center><b><u>VTx</u></b></center><br />[wpv-post-taxonomy type="s_marque-du-vtx" id='$cpt_vtx']<br />[types field='cf_modele-du-vtx' id='$cpt_vtx'][/types]<br />AIO [wpv-post-taxonomy type="s_combo-vtx-cam-fpv" id='$cpt_vtx']<br />[types field='cf_puissance-du-vtx' format='FIELD_VALUE' separator=', ' id='$cpt_vtx'][/types] mW
          	</div>
          	<div class="col-sm-4">
              	<center><b><u>Caméra FPV</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-la-cam-fpv" id='$cpt_cam-fpv']<br />[types field='cf_modele-de-cam-fpv' id='$cpt_cam-fpv'][/types]<br />[wpv-post-taxonomy type="s_capteur-de-la-cam-fpv" id='$cpt_cam-fpv']<br />[types field='cf_norme-cam-fpv' separator='/' id='$cpt_cam-fpv'][/types]<br />[types field='cf_resolution-de-la-cam-fpv' format='FIELD_VALUE' id='$cpt_cam-fpv'] TVL[/types]
          	</div>
			<div class="col-sm-4">
              	<center><b><u>Caméra HD</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-la-cam-hd" id='$cpt_cam-hd']<br />[types field='cf_modele-de-la-cam-hd' id='$cpt_cam-hd'][/types]<br />[types field='cf_resolution-de-la-cam-hd' id='$cpt_cam-hd'][/types]
          	</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
              	<center><b><u>PDB</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-la-pdb" id='$cpt_pdb']<br />[types field='cf_modele-de-la-pdb' id='$cpt_pdb'][/types]
          	</div>
			<div class="col-sm-4">
              	<center><b><u>OSD</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-l-osd" id='$cpt_osd']<br />[types field='cf_modele-de-l-osd' id='$cpt_osd'][/types]
          	</div>
			<div class="col-sm-4">
              	<center><b><u>Antenne</u></b></center><br />[wpv-post-taxonomy type="s_marque-de-l-antenne" id='$cpt_antenne']<br />[types field='cf_modele-d-antenne' id='$cpt_antenne'][/types]<br />[wpv-post-taxonomy type="s_type-de-connectique" separator="<br />" id='$cpt_antenne']
          	</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<center><b><u>Remarque(s)</u></b></center><br />[types field='cf_remarques-sur-le-built'][/types]
          	</div>
          	<div class="col-sm-4">
          		<center><b><u>Auteur</u></b></center><br />[wpv-post-taxonomy type="s_nom-pseudo" id='$cpt_id-fiche-drone']<br />[types field='cf_avatar-id-fiche-drone' alt='%%ALT%%' title='%%TITLE%%' width='150' height='150' align='center' resize='proportional' separator=', ' id='$cpt_id-fiche-drone'][/types]<br />[types field='cf_site-web-id-fiche-drone' target='_blank' separator='<br/> ' id='$cpt_id-fiche-drone'][/types]<br />[types field='cf_e-mail-contact-id-fiche-drone' id='$cpt_id-fiche-drone'][/types]<br />[types field='cf_qr-code-id-fiche-drone' alt='%%ALT%%' title='%%TITLE%%' size='thumbnail' align='center' resize='proportional' id='$cpt_id-fiche-drone'][/types]
          	</div>
			<div class="col-sm-4">
              	<center><b><u>Avis</u></b></center><br />[types field='cf_avis-du-posteur-sur-le-built'][/types]
          	</div>
		</div>
		<div class="row">
			<div class="col-sm-5">
              	<center><b><u>Vidéo</u></b></center><br />[types field='cf_video-du-drone' width='300' height='300' separator='<br />'][/types]
          	</div>
			<div class="col-sm-5 offset-sm-2">
              	<center><b><u>Photo(s)</u></b></center><br />[types field='cf_visuel-drone' alt='%%ALT%%' title='%%TITLE%%' size='large' align='center' resize='proportional' separator='<br />'][/types]
          	</div>
		</div>
	</div>
</div>
</bordure>

I use Visual Editor Cell in Toolset Layout
Wherever I insert the tag, the result is not good

#600836

thibautF

Hi,

<p> seems don't like <center> tags...

#600851

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

I see the issue here, <bordure> is not a valid html tag.

What you can do is to assign it as a class of a div like this

<div class= 'bordure'>


</div>

Then rewrite your css like this.

.bordure {
    border: 2px solid dark;
    border-radius: 5px;
    background-color: rgba(128,128,128,0.15);
    padding: 3px 3px 3px 3px;
}

This should now work.

Please let me know.
Thanks,
Shane

#600897

thibautF

Thx !!!

Known issues and solutions

Frequently asked support questions

Support tickets archive

Get help from experienced contractors

Meet Toolset support team

Toolset Customer Support Policy

Need to tell us something about the quality of support

How to remove personal information from your database for support