Wie kann ich in Bootstrap einen Text größer machen?

Ich habe ein label, ich möchte dieses gerne vergrößern, welche Klasse muss ich dafür verwenden?

<label class="....."> Hello World </label

3 Antworten

16.03.2019, 21:48

In den neueren Bootstrap Versionen gibt es hierfür die Klasse display

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Siehe: https://hackerthemes.com/bootstrap-cheatsheet/#typography__display

Globale Bootstrap Überschriften Formatierungen:

h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Globale Bootstrap Schriftgröße und Zeilenhöhe für p Absätze:

14px
1.428

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* Die style.css könnte die o.g. globalen Werte folgendermaßen verändern */
* {
   font-size: 16px;
   line-height: 2;
}

Woher ich das weiß:Berufserfahrung

ChrisCat1, UserMod Light

19.11.2018, 20:39

Erstelle dafür doch einfach eine eigene Klasse und weise dieser per css deine wunsch Schriftgröße zu.

NiklasPlayz

Fragesteller

19.11.2018, 20:43

ja das weiß ich, ich möchte aber eine Klasse von Bootsrtap verwenden, oder gibts das nicht?

regex9

19.11.2018, 21:23

@NiklasPlayz

https://getbootstrap.com/docs/4.1/content/typography/

ostfriesenjung

19.11.2018, 23:32

Einfach mal bei Bootstrap nachschauen

https://getbootstrap.com/docs/4.1/content/typography/

bzw.

https://getbootstrap.com/docs/4.1/migration/#forms-1

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

Bootstrap mit eigener CSS mischen?

Eine Agentur wo ich anfangen möchte zu arbeiten, arbeiten mit Bootstrap. Jetzt hab ich mich da ein bisschen reingelesen, aber irgendwie kommt es mir so vor, als hätte es sehr beschränkte Möglichkeiten z.B. beschränkte Buttonfarben ect. Soll ich die Buttonfarbe dann im Bootstrap CSS ändern oder soll ich eine zusätzliche Klasse machen und die dann in meinem css stylen oder soll ich gar nicht bootstrap verwenden und gleich nur mein css heranziehen.

Wie weit soll ich Bootstrap CSS und meine CSS vermischen oder soll ich versuchen reine Bootstrap Seiten zu machen?

Ich bin dezent verwirrt ... Hoffe ihr habt Nachsicht mit mir ^^

...zur Frage

Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

...zur Frage

HTML Formularbutton, der E-Mail versendet?

Hallo,

ich habe in meiner Webseite ein Formular erstellt (Code ist hier eingefügt) und möchte, dass wenn man auf den <input> (submit) drückt, dass eine E-Mail versendet wird, an eine Adresse, die ich vllt. im HTML-Code angeben würde.

Geht das irgendwie?

Danke im Voraus!

<form style="margin-left: 3%; margin-right: 3%; padding-top: 20px;">
  <div class="form-group">
    <label>Vorname, Nachname</label>
    <input type="text" class="form-control" name="Name" placeholder="Ihr Name">
  </div>
  <div class="form-group">
    <label>E-Mail</label>
    <input type="email" class="form-control" name="E-Mail" placeholder="Ihre E-Mail">
  </div>
  <div class="form-group">
    <label>Betreff/Titel</label>
    <input type="text" class="form-control" name="Titel" placeholder="Titel">
  </div>
  <div class="form-group">
    <label>Anliegen</label>
    <textarea class="form-control" name="Anliegen" placeholder="Ihr Anliegen"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="Button" value="Senden">
  </div>
</form>

...zur Frage

Html CSS Suchleiste, hilfe?

Der Code unten ist eine Suchleiste die sich erweitert wenn man auf das search icon klickt,

das Problem ist das dann kein hellgrauer text in dem input feld steht bevor man was getippt hat.

wie zum beispiel auf gutefrage.net "Suche nach Fragen,Themen und Nutzern" und wenn man was eintippt verschwindet es.

Kann das jemand hinzufügen sodass es auch einen text im input hat,

wenn ihr Hallo oder sowas da reinschreibt seh ich schon wo ich das selber machen.

<!-- Expandable Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>

...zur Frage

JavaScript: Wieso funktioniert mein Dropdownbutton nicht?

Der Dropdownbutton funktioniert nicht, obwohl Bootstrap verlinkt wurde. Was könnte der Grund sein?

HTML:

  <div class="col-sm-4 col-md-4 " onclick="sortFunction()" style="color: white;text-align: right;">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:white;">Sort By</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Most Liked</a>
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Least Liked</a>
      </div>
    </div>
  </div>
</div>

JavaScript:

function mostLikedSortFunction() {
  movies.sort(function(a, b){return b.num_of_likes - a.num_of_likes});
  CreateMoviesFromJson();
}

function leastLikedsortFunction() {
  movies.sort(function(a, b){return a.num_of_likes - b.num_of_likes});
  CreateMoviesFromJson();
}

...zur Frage

Wie kann ich Zeilenumbrüche in einer E-Mail einfügen (PHP)?

Hallo,

ich habe mit HTML und PHP ein Kontaktformular erstellt, welches mir per E-Mail zugesendet wird.

Die einzelnen Felder in der E-Mail werden aber einfach hintereinander weg geschrieben und ich möchte Absätze nach jedem Feld einfügen, damit die E-Mail etwas schöner aussieht.

Hier der Code:

if (isset($_POST["submit"])) {
  mail("email-adresse", "Kontaktformular", 'Firma: '.$_POST["Firma"].'Branche: '.$_POST["Branche"].'Anrede: '.$_POST["Anrede"].
  'Name: '.$_POST["Name"].'Straße: '.$_POST["Straße"].'PLZ, Ort: '.$_POST["PLZ,Ort"].'Telefon: '.$_POST["Telefon"].'E-Mail: '.$_POST["E-Mail"].'Anmerkung: '.$_POST["Anmerkung"]);
?>
<h1 class="erfolg">Danke für Ihre Anfrage!</h1>
<?php
  }
?>
<form action="Kontakt.php" method="post">
  <legend>Kontaktformular</legend>
  <br>
  <!-- Titel für Eingabefelder -->
  <p>
    <label>Firma</label><br>
    <input type="text" name="Firma">
  </p>
  <p>
    <label>Branche</label><br>
    <input type="text" name="Branche">
  </p>
  <p>
    <label for="Anrede">Anrede*</label><br>
    <select name="Anrede" required>
      <option></option>
      <option>männlich</option>
      <option>weiblich</option>
      <option>divers</option>
    </select>
  </p>
  <p>
    <label>Name*</label><br>
    <input type="text" name="Name" required placeholder="">
  </p>
  <p>
    <label>Straße</label><br>
    <input type="text" name="Straße">
  </p>
  <p>
    <label>PLZ, Ort</label><br>
    <input type="text" name="PLZ, Ort">
  </p>
  <p>
    <label>Telefon</label><br>
    <input type="text" name="Telefon">
  </p>
  <p>
    <label>E-Mail*</label><br>
    <input type="email" name="E-Mail" required>
  </p>
  <p>
    <label>Anmerkung</label><br>
    <textarea rows="10" name="Anmerkung" placeholder=".">
    </textarea>
  </p>
  <p>
    <button type="submit" name="submit"><a>Versenden!</a></button>
  </p>
</form>

...zur Frage

HTML-Eingabefeld mit jQuery nur mit Zahlen zulassen?

Wie lässt sich in HTML-Eingabefeld mit jQuery nur numerisch (0-9) zulassen?

<div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label for="Bauherr_PLZ">PLZ</label>
                                                                <input type="text" class="form-control" maxlength="5" onKeyUp="zahl()" value="{if isset($values.Bauherr_PLZ)}{$values.Bauherr_PLZ}{/if}" name="Bauherr_PLZ" />
                                                            </div>
                                                            </div>

...zur Frage

weiße Ecken bei border-radius?

Hi,

ich habe eine Navbar von Bootstrap auf meiner Website und ein Accountsystem, bei dem das Profilbild oben rechts angezeigt wird. Aus irgendeinem Grund werden, trotz, dass ich einmal per Bootstrap Klasse rounded-circle und auch selbst:

border-radius: 50%;

weiße Ecken angezeigt. Das Bild ist eigentlich transparent. Am Bild selber kanns aber net liegen, weil ich unterschiedliche getestet habe...

Mein Code:

<img src="/img/profile-images/donut.png" alt="user-img" class="user-img-navbar rounded-circle shadow-lg">

So sieht das dann aus:

Ich weiß nicht ob´s man gut erkennen kann aber direkt um das bild sind so weiße ecken. ich habe auch schon die hintergrundfarbe der navbar auf weiß geändert... man sieht die ecken aber trotzdem noch...

Jemand ne idee warum da weiße ecken sind? :D

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

[HTML/CSS] Zwei Form Elemente nebeneinander in die Mitte des Bildschirms?

Hallo Leute, ich würde gerne meine beiden Input Elemente nebeneinander in die Mitte des Bildschirms haben. Habe schon versucht ein DIV außenrum zu erstellen und diesem text-align:center zu geben. Hat leider nicht geholfen.

Mein Code:

<div class="upperForm form-row">
  <div class="form-group">
    <label for="name1">Name</label>
    <input type="text" class="form-control main-input" id="name1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control main-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
</div>

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Textfeld vergrößern input html?

Hallo ich wollte fragen ob jemand weiß wie man ein Textfeld vergrößern kann? Wenn man eine input type=text hat? Also ich meine das die Höhe größer wird.

So z.b (man kann auch was reinschreiben)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen