Hallo,
Ik weet niet of ik deze vraag hier kan vragen maar ik ga toch proberen.
ik heb 4 kolomen gemaakt met bootstrap 4 maar ik wil deze kolomen bepaalde afstand van elkaar hebben met margin.
maar dan de laatste (4 de) kolom gaat naar de volgende line.
Ik heb geprobeerd deze probleem op te lossen maar zonder resultaat.
mij url is :http://webdesignleren.com/
mij html code is:

<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 "></div>
</div>



dank u wel
johannes
Hoe pas je die margin toe?
- Ariën - op 21/10/2020 18:04:39

Hoe pas je die margin toe?




[size=xsmall]Toevoeging op 21/10/2020 18:42:55:[/size]

ik heb geprobeerd ml-1 toe te voegen in


<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-1 "></div>

alle informatie over ml-1 staat op bootstrap website :https://getbootstrap.com/docs/4.4/utilities/spacing/
maar toch de laatse kolom gaat naar de volgende lijn.
johannes
Waar is je DOCTYPE?
het ontbrak in header.php maar ik heb gecorrigeerd.
deze is de code in header.php

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package john
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	
	<?php wp_head(); ?>
</head>

de probleem blijft hetzelfde.


<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
</div>

[size=xsmall][i]Toevoeging op 22/10/2020 12:24:17:[/i][/size]

het ontbrak in header.php  maar ik heb gecorrigeerd.
deze is de code in header.php
[code]
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package john
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	
	<?php wp_head(); ?>
</head>

de probleem blijft hetzelfde.

[code]
<div class="row ">
<div class="home-content3-image1 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image2 col-sm-12 col-md-6 col-lg-3 ml-3"></div>
<div class="home-content3-image3 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
<div class="home-content3-image4 col-sm-12 col-md-6 col-lg-3 ml-3 "></div>
</div>
heb je het element al geinspecteerdin de browser? Misschien zit er een CSS-stijl in de weg?
bedankt voor alle informatie.
deze is de juiste code:

<div class="row ">
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image1 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image2 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image3 w-100"></div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-3">
    <div class="home-content3-image1 w-100"></div>
  </div>
</div>

mij url is:http://webdesignleren.com/
johannes
Met een wrapper-divje werkt het inderdaad beter.
dank u wel
johannes

[size=xsmall]Toevoeging op 23/10/2020 13:15:32:[/size]

dank u wel
johannes

Reageren