Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Positionierung (links und rechts) von 2 Elementen in Card-Header
#1
Guten Abend,

ich möchte in einem Card-Header 2 Elemente platzieren: 
Einmal einen Card-Titel (links) und einen Button der rechts ausgerichtet werden soll. Mein Code (der in einem Django-Template ist) sieht wie folgt aus:
Code:
  <section id="details" class="col-sm-6 mx-auto">
      <div class="card">
        <h5 class="card-header">Post Id-{{ post.pk }} <a href="#" class="btn btn-primary ml-auto">Edit</a></h5>
        <div class="card-body">
          <h5 class="card-title"><small>Title:</small> {{ post.title}}</h5>
          <p class="card-text"><small>Category:</small> {{ post.category}}</p>
          <p class="card-text"><small>Publish Date:</small> {{ post.publish_date}}</p>

        </div>
      </div>
  </section>
Was ich bisher versucht habe war: ml-auto bzw. mr-auto in der class des buttons bzw. in der h5-class habe ich text-right eingefügt. Dann sind aber der Titel und der Button rechts ausgerichtet.
Hier noch ein Screenshot wie das Ganze momentan aussieht: 
Bootstrap-Card

Vielen Dank schon jetzt für eine Antwort.

grumpy cat
Zitieren
#2
Versuchs mal so:
HTML5
  1. <section id="details" class="col-sm-6 mx-auto">
  2.             <div class="card">
  3.                 <h5 class="card-header">Post Id-{{ post.pk }} <a href="#" class="btn btn-primary float-right">Edit</a></h5>
  4.                 <div class="card-body">
  5.                     <h5 class="card-title"><small>Title:</small> {{ post.title}}</h5>
  6.                     <p class="card-text"><small>Category:</small> {{ post.category}}</p>
  7.                     <p class="card-text"><small>Publish Date:</small> {{ post.publish_date}}</p>
  8.  
  9.                 </div>
  10.             </div>
  11.         </section>


Zitieren
#3
@The-Error:

Klasse, jetzt sieht es genauso aus, wie ich es mir vorgestellt hatte. Vielen Dank.

grumpy cat
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Bootstrap 4 Mega Menu
Last Post: The-Error
08.12.2019 12:57
» Replies: 2
» Views: 621
max-width Layout-Breite
Last Post: The-Error
12.11.2019 17:12
» Replies: 1
» Views: 335
Multi-Language in 10.0.8
Last Post: bootshock
01.11.2019 23:19
» Replies: 0
» Views: 405

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 328
» Latest member: michi323
» Forum threads: 256
» Forum posts: 1.007

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently 13 online users. [Complete List]
» 1 Member(s) | 12 Guest(s)
Avatar

>