Bootstrap Grid Moodle 3.10

Bootstrap Grid Moodle 3.10

door Marijke Zeer -
Aantal antwoorden: 7

Hallo allemaal,


Ik gebruik Moodle 3.10 en het wil me niet lukken om bootstrap grids toe te voegen aan mijn pagina's. Dus alles komt, heel saai, onder elkaar te staan. Ik heb een Atto plugin gedownload (https://moodle.org/plugins/atto_bsgrid) maar deze ondersteunt 3.10 niet en werkt dus ook niet (de grids komen onder elkaar en niet naast elkaar) ik heb ook beide standaard thema's van Moodle geprobeerd (https://docs.moodle.org/310/en/Standard_themes) maar geen van beide lijkt te werken. Ik kom er helaas niet uit met de documentatie op de site. Wie kan me verder helpen?

Gemiddelde van de beoordelingen:  -
Als antwoord op Marijke Zeer

Re: Bootstrap Grid Moodle 3.10

door Gemma Lesterhuis -
Foto van Heel behulpzame Moodlers
Hoi Marijke,

De plugin https://moodle.org/plugins/atto_bsgrid zal inderdaad niet werken omdat deze geen Bootstrap 4 ondersteund en dat is wel wat je nodig hebt voor 3.10.

Je zou even moeten kijken naar bijvoorbeeld :
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp of https://getbootstrap.com/docs/4.0/layout/grid/ dat werkt over het algemeen prima.

Hoop dat je hier wat aan hebt.

Groet,
Gemma
Gemiddelde van de beoordelingen:  -
Als antwoord op Gemma Lesterhuis

Re: Bootstrap Grid Moodle 3.10

door Marijke Zeer -
Hoi Gemma,

Dank voor je antwoord. Ik dacht eigenlijk dat de mogelijkheid al in Moodle zat maar dat ik misschien iets moest aanpassen aan de instellingen of iets dergelijks om het te kunnen gebruiken bij mijn pagina's. In de standaard thema's van Moodle zit toch al Bootstrap of ben ik nu in de war?

Misschien moet ik iets duidelijker zijn: Ik heb op dit moment dus geen mogelijkheid om bij het bewerken van een pagina (met uitleg of iets dergelijks) elementen naast elkaar te plaatsen. Ik kan alleen alles onder elkaar plaatsen. Een plaatje komt dus ook onder een regel tekst en kan ik er niet naast krijgen. Maar ik kan ook niet meerdere kolommen tekst maken, alleen door een tabel te gebruiken maar dat werkt weer niet als je het scherm kleiner en groter maakt.
Gemiddelde van de beoordelingen:  -
Als antwoord op Marijke Zeer

Re: Bootstrap Grid Moodle 3.10

door Gemma Lesterhuis -
Foto van Heel behulpzame Moodlers

Hoi Marijke,

het huidige standaard thema maakt inderdaad gebruik van Bootstrap 4, waardoor je dus Bootstrap 4 "code" kan gebruiken om te bereiken wat je wilt. Maar zover ik weet is er niet een optie in je Atto (of TinyMCE) werkbalk waarmee je kan zeggen "zet dit in deze opzet".

Wat je kan doen - als je handig bent in HTML - is deze HTML code in je tekst vlak zetten (let op: wel optie HTML) gebruiken. 

Waar je vervolgens zit staan Colum1 left, daar zet je tekst, en Colum 2 je afbeelding. 
Of andersom. 

hieronder een voorbeeldje


<div class="container">
  <div class="row">
    <div class=".col-sm-">
      column 1 left
    </div>
     <div class=".col-sm-">
      Colum 2 right
    </div>
  </div>
</div>

Gemiddelde van de beoordelingen:  -
Als antwoord op Gemma Lesterhuis

Re: Bootstrap Grid Moodle 3.10

door Marijke Zeer -
Hoi Gemma,

Nogmaals dank! Ik was dus inderdaad in de veronderstelling dat er een 'knopje' in Moodle zou zitten die ervoor zou zorgen dat ik dingen naast elkaar kon zetten. Maar met HTML werkt het ook vast. Ik ga het uitproberen!
Gemiddelde van de beoordelingen:  -
Als antwoord op Gemma Lesterhuis

Re: Bootstrap Grid Moodle 3.10

door Gemma Lesterhuis -
Foto van Heel behulpzame Moodlers
Als aanvulling nog, als je niet zo happig bent op het werken met HTML codes dan zou je ook kunnen kiezen voor de Generico FIlter + Generico Atto plugin. Deze plugin kun je met "bundels" vullen waar deze stukjes codes in staan en je vervolgens met "tags/codesnippets" die je toevoegt oplost. Het is een beetje technisch verhaal maar het werkt erg goed om te voorkomen dat docenten zelf met HTML aan de slag moeten cq. van beheer gezien
Gemiddelde van de beoordelingen:  -
Als antwoord op Gemma Lesterhuis

Re: Bootstrap Grid Moodle 3.10

door Marijke Zeer -

Hoi Gemma,


Sorry dat ik je weer lastigval... Ik heb het vandaag uitgeprobeerd maar krijg het nog niet werkend. Dit was mijn code:

<div class="container">

    <div class="row">

        <div class=".col-sm-">

            <p>en</p>

            <p>maar</p>

            <p>want</p>

        </div>

        <div class=".col-sm-">

            <p>of</p>

            <p>dus</p>

        </div>

    </div>

</div>

En dit is de uitkomst:

en

maar

want

of

dus

Nu heb ik dus nog niet netjes twee kolommen naast elkaar (zoals in Word). Het woord 'dus' en het woord 'maar' staan bijna tegen elkaar aan. Ik vind het eigenlijk ook best een onhandige workaround, ik heb een HTML en CSS cursus gevolgd voor ik aan Moodle begon maar ik ben niet echt een programmeur. Ik hoop dat er nog een andere oplossing te vinden is 😟


Edit: Ik zie dat het in deze post niet werkt (in het voorbeeld tijdens het typen wel). Maar ik krijg dus twee rijtjes die vlak tegen elkaar staan (zie screenshot):

Bijlage Screenshot.png
Gemiddelde van de beoordelingen:  -
Als antwoord op Marijke Zeer

Re: Bootstrap Grid Moodle 3.10

door Joost Elshoff -
Foto van Heel behulpzame Moodlers
Hi Maaike,

Als je een class in de div zet in HTML, doe je dat zonder de puntjes ervoor. Die gebruik je eerder in je stylesheet.

Dus <div class=“col-sm”>, dat zou moeten werken.
Gemiddelde van de beoordelingen:  -