How to make a Label Bold Vadin

Shourya Bansal :

I am trying to add a heading to a section in my project, but I can't increase the size of the label or make it bold.

I am currently using a label, but if there is an alternative, I will also take that.

Thank you very much.

Edit: I am using Vaadin with Java

Basil Bourque :

H1, H2, … , H6

HTML solves your need with the h1, h2, … h6 tags. The “h” stands for “heading”.

Vaadin represents these tags with objects of a class of the same name. To get a <h2>…</h2> element in your the web page generated by Vaadin, in your Java code use the class H2.

The styling depends on your theme, such as Valo or Material. You can tweak with a bit of CSS if you want. This has been addressed already on Stack Exchange, so search to learn more.

Using H1…H6 is valuable if your web app will be crawled by a search engine. Search engines use the hierarchy of these tags to make sense of your content.

Here is some untested example code.

VerticalLayout layout = new VerticalLayout() ;

layout.add( new H1( "Animal" ) ) ;

layout.add( new H2( "Identity" ) ) ;
layout.add( new TextField( "Name" ) ) ;
layout.add( new TextField( "Species" ) ) ;
layout.add( new TextField( "Color" ) ) ;

layout.add( new H2( "Owner" ) ) ;
layout.add( new TextField( "Name" ) ) ;
layout.add( new TextField( "Phone" ) ) ;

Here is complete example app.

package work.basil.example;

import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;


/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
//@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.add( new H1( "Animal" ) );

        this.add( new H2( "Identity" ) );
        this.add( new TextField( "Name" ) );
        this.add( new TextField( "Species" ) );
        this.add( new TextField( "Color" ) );

        this.add( new H2( "Owner" ) );
        this.add( new TextField( "Name" ) );
        this.add( new TextField( "Phone" ) );
    }
}

And a screenshot of app running in Microsoft Edge version 80.0.361.62, macOS Mojave.

Tip: Learn some basic HTML & CSS

Learning the basics of HTML and CSS will greatly enhance your Vaadin skills.

Vaadin Flow hides most of the details and drudgery of HTML/CSS/JavaScript. But learning the basics of HTML & CSS will help you make more sense of Vaadin features.

I suggest making a real web site by hand (manually coded HTML & CSS ) for a friend, club, church, etc. to get your hands a bit dirty. With some lessons learned, return to the clean world of Vaadin.