CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-5
Chris Costa
Chris Costa

Reputation: 691

How to make the width to fit the text, and not be the full width with Bootstrap

Here I have a title which I put into a row so it will take specific height. It is working, but the problem is that my h1 is taking the whole row. I mean that I want the width of my text to be only as wide as the text is and not to be the same width with the parent row. Do you know any way how I can do this?

    
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Survey Creato</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
  </head>

  <body style="background-color: rgb(0, 0, 0)">
    <div style="height: 120px">
      <div class="w-100 h-50" style="background-color: rgb(255, 255, 255)">
      </div>
      <div
        class="w-100 h-50 d-inline-block"
        style="background-color: rgb(134, 188, 37)"
      ></div>
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div
        id="survey"
        class="container justify-content-center"
        style="height: 600px; width: 1000px; background-color: white"
      >
        <div class="row">
          <h1
            class="display-4 mt-3 text-secondary text-center border"
            contenteditable="true"
          >
            Survey Name
          </h1>
        </div>
      </div>
    </div>
  </body>

Upvotes: 1

Views: 6458

Answers (2)

Chris Costa
Chris Costa

Reputation: 691

I changed

     <div class="row">
              <h1
                class="display-4 mt-3 text-secondary text-center border"
                contenteditable="true"
              >
                Survey Name
              </h1>
     </div>

to

    <div class="row justify-content-center">
              <h1
                class="display-4 mt-3 text-secondary border"
                contenteditable="true"
                style="width: fit-content"
              >
                Survey Name
              </h1>
    </div>

Basically I added justify-content-center class to my row, and then style="width: fit-content" to my header.

Upvotes: 0

Gui
Gui

Reputation: 57

I think using width: fit-content should do the trick

h1 {
    width: fit-content;
}

Upvotes: 5

Related Questions