Text
<div class='row no-gutters pb-3'>
<div class='col-md-6 bg-light p-3'>
<h1>Überschrift</h1>
<p>Text</p>
</div>
<div class='col-md-6 bg-light'>
<img src='https://dawesys.de/dummybild' class='img-fluid float-right m-3' alt='' />
</div>
</div>
Text1
Text2
Text3
<div class='card-deck'>
<div class='card border-primary'>
<div class='card-header'>Überschrift1</div>
<div class='card-body'>
<h5 class='card-title'>Titel1</h5>
<p>Text1</p>
</div>
<div class='card-footer'>
<a href='#' class='btn btn-primary''>Link1</a>
</div>
</div>
<div class='card border-primary'>
<div class='card-header'>Überschrift2</div>
<div class='card-body'>
<h5 class='card-title'>Titel2</h5>
<p>Text2</p>
</div>
<div class='card-footer'>
<a href='#' class='btn btn-primary''>Link2</a>
</div>
</div>
<div class='card border-primary'>
<div class='card-header'>Überschrift3</div>
<div class='card-body'>
<h5 class='card-title'>Titel3</h5>
<p>Text3</p>
</div>
<div class='card-footer'>
<a href='#' class='btn btn-primary'>Link3</a>
</div>
</div>
</div>
Text
<div class='alert alert-dismissible alert-primary mb-3' role='alert'>
<button type='button' class='close' data-dismiss='alert'>×</button>
<h4 class='alert-heading'>Überschrift</h4>
<p>Text</p>
</div>
<ul class='list-unstyled'>
<li class='media mb-3'>
<i class='fas fa-check-circle text-dark display-3 align-self-center mr-3'></i>
<div class='media-body'>
<h5 class='mt-0 mb-1'>Medienobjekt als Liste</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class='media mb-3'>
<i class='fas fa-plus-circle text-dark display-3 align-self-center mr-3'></i>
<div class='media-body'>
<h5 class='mt-0 mb-1'>Medienobjekt als Liste</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class='media mb-3'>
<i class='fas fa-question-circle text-dark display-3 align-self-center mr-3'></i>
<div class='media-body'>
<h5 class='mt-0 mb-1'>Medienobjekt als Liste</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
<button type='button' class='btn btn-secondary ' data-toggle='modal' data-target='#meinModal'>Modal öffnen</button>
<div id='meinModal' class='modal fade' tabindex='-1'>
<div class='modal-dialog'>
<div class='modal-content bg-light'>
<div class='modal-header'>
<h5 class='modal-title'>Titel</h5>
<button type='button' class='close' data-dismiss='modal'>×</button>
</div>
<div class='modal-body'>
<p>Text</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Schließen</button>
</div>
</div>
</div>
</div>
<div id='dwsCMSCarousel' class='carousel slide' data-ride='carousel'>
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='https://dawesys.de/dummybild?h=100' class='d-block w-100' alt='...'>
</div>
<div class='carousel-item'>
<img src='https://dawesys.de/dummybild?h=100' class='d-block w-100' alt='...'>
</div>
<div class='carousel-item'>
<img src='https://dawesys.de/dummybild?h=100' class='d-block w-100' alt='...'>
</div>
</div>
<a class='carousel-control-prev' href='#dwsCMSCarousel' role='button' data-slide='prev'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='sr-only'>Zurück</span>
</a>
<a class='carousel-control-next' href='#dwsCMSCarousel' role='button' data-slide='next'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='sr-only'>Vor</span>
</a>
</div>
<div class='jumbotron bg-light'>
<h1 class='display-4'>Überschrift</h1>
<p class='lead'>Text</p>
<hr class='my-4'>
<p>Text</p>
<a class='btn btn-primary btn-lg' href='#' role='button'>Mehr Info</a>
</div>
<form class='container p-3 my-3 border'>
<div class='form-row'> <!-- kompakter -->
<div class='col'>
</div>
<div class='col'>
</div>
</div>
<div class='form-group'>
<label for='Name'>Name</label>
<input type='text' class='form-control' name='Name' id='Name' placeholder='Name' required/>
</div>
<div class='form-group'>
<label for='Email'>Email address</label>
<input type='email' class='form-control' id='Email' aria-describedby='emailHelp' placeholder='E-Mailadresse' pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'/>
<small id='emailHelp' class='form-text text-muted'>Wir geben Ihre E-Mailadresse nicht weiter.</small>
</div>
<div class='input-group'>
<div class='input-group-prepend'>
<div class='input-group-text'>@</div>
</div>
<input type='email' class='form-control' id='Email' aria-describedby='emailHelp' pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'/>
</div>
<small id='emailHelp' class='form-text text-muted'>Beachten Sie unten stehenden Text.</small>
<div class='form-group'>
<label for='exampleInputPassword1'>Password</label>
<input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'>
</div>
<div class='form-group'>
<label for='exampleFormControlSelect1'>Bitte auswählen</label>
<select class='form-control' name='exampleFormControlSelect1' id='exampleFormControlSelect1'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<fieldset class='form-group'>
<div class='form-check'>
<label class='form-check-label'>
<input type='checkbox' name='meinCheck' class='form-check-input' value=''>Option 1
</label>
</div>
<div class='form-check'>
<label class='form-check-label'>
<input type='checkbox' name='meinCheck' class='form-check-input' value=''>Option 2
</label>
</div>
<div class='form-check'>
<label class='form-check-label'>
<input type='checkbox' name='meinCheck' class='form-check-input' value='' disabled>Option 3
</label>
</div>
<div class='form-group'>
<label for='Nachricht'>Ihre Nachricht an uns</label>
<textarea class='form-control' name='Nachricht' id='Nachricht' cols='30' rows='7'></textarea>
</div>
<div class='form-group form-check'>
<input type='checkbox' class='form-check-input' id='exampleCheck1'>
<label class='form-check-label' for='exampleCheck1'>Bitte bestätigen</label>
</div>
<div class='py-4 px-2 d-flex justify-content-center justify-content-between'> <!-- nur bei vielen Buttons -->
<button type='submit' class='btn btn-primary'>Absenden</button>
</div>
</fieldset>
</form>