`Shaping up bootstrap spans with CSS`

Question

`Shaping up bootstrap spans with CSS`

I am working on a simple bootstrap layout for a workday scheduler app, and I've noticed that when the width of the text content increases it affects the vertical alignment of the spans where I display the hours of the day. Here is an image to illustrate this issue:

https://i.sstatic.net/Pt9Dm.jpg

Is there a way to ensure that those spans align vertically using CSS or possibly a bootstrap class? Below is my HTML code:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <title>Work Day Scheduler</title>
    </head>
    
    <body>
      <header class="jumbotron">
        <h1 class="display-3">Work Day Scheduler</h1>
        <p class="lead">A simple calendar app for scheduling your work day</p>
        <p id="currentDay" class="lead"></p>
      </header>
      <div class="container">
        <!-- Timeblocks go here -->
        // Input groups with time blocks
      </div>
    
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    </body>
    
    </html>

css bootstrap-4

Answer 1

Answer №1

Did you attempt adding a minimum width in your CSS to resolve the problem?

.input-group-text{
   min-width: 150px;
}

Answer 2

Did you attempt adding a minimum width in your CSS to resolve the problem?

.input-group-text{
   min-width: 150px;
}

Answer 3

Answer №2

assuming that the numbers won't exceed 2 digits and either be am or pm, you can assign them a fixed width using width: 80px;. For a responsive design, consider adding a media query to adjust the pixel amount based on screen size.

.input-group-text{
  width:80px;
}

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <title>Work Day Scheduler</title>
    </head>
    
    <body>
      <header class="jumbotron">
        <h1 class="display-3">Work Day Scheduler</h1>
        <p class="lead">A simple calendar app for scheduling your work day</p>
        <p id="currentDay" class="lead"></p>
      </header>
      <div class="container">
        <!-- Timeblocks go here -->
        <div class="input-group input-group-lg">x
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">9 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>  
        <!-- more timeblocks... -->
      </div>

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    </body>
    
    </html>

Answer 4

assuming that the numbers won't exceed 2 digits and either be am or pm, you can assign them a fixed width using width: 80px;. For a responsive design, consider adding a media query to adjust the pixel amount based on screen size.

.input-group-text{
  width:80px;
}

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <title>Work Day Scheduler</title>
    </head>
    
    <body>
      <header class="jumbotron">
        <h1 class="display-3">Work Day Scheduler</h1>
        <p class="lead">A simple calendar app for scheduling your work day</p>
        <p id="currentDay" class="lead"></p>
      </header>
      <div class="container">
        <!-- Timeblocks go here -->
        <div class="input-group input-group-lg">x
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">9 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>  
        <!-- more timeblocks... -->
      </div>

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    </body>
    
    </html>

Answer 5

Answer №3

To align the time labels, you can use this CSS code snippet:

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 95px;
  text-align: right;
}

It's also important to enclose your form within an additional container to prevent affecting other labels on the page or other websites that share the same CSS.

Click here for a demonstration:

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 90px;
  text-align: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container">
    <!-- Timeblocks go here -->
   (remaining HTML code remains the same)
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>

</html>

Answer 6

To align the time labels, you can use this CSS code snippet:

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 95px;
  text-align: right;
}

It's also important to enclose your form within an additional container to prevent affecting other labels on the page or other websites that share the same CSS.

Click here for a demonstration:

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 90px;
  text-align: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container">
    <!-- Timeblocks go here -->
   (remaining HTML code remains the same)
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>

</html>

Answer 7

Answer №4

Utilizing jQuery for a flexible solution rather than fixed widths can be achieved in the following manner:

let maxContainerWidth = 0;
$(".input-group-prepend").each(function(){
  if( $(this).width() > maxContainerWidth ) {
    maxContainerWidth = $(this).width();
  }
});
$(".input-group-prepend").width(maxContainerWidth)
$(".input-group-text").width("100%")

Answer 8

Utilizing jQuery for a flexible solution rather than fixed widths can be achieved in the following manner:

let maxContainerWidth = 0;
$(".input-group-prepend").each(function(){
  if( $(this).width() > maxContainerWidth ) {
    maxContainerWidth = $(this).width();
  }
});
$(".input-group-prepend").width(maxContainerWidth)
$(".input-group-text").width("100%")

`Shaping up bootstrap spans with CSS`

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Stop the container from growing in height due to column expansion

enable click functionality for individual table cells using jquery

Automatically insert a page break after every set of n items to make printing easier

Leverage the power of effekt in your AngularJS development

Trouble with CSS styling for focused input fields

Enhanced Firefox functionality with support for multiple columns

The svg line is drawn with a width that is half of the specified width

Image Positioned Outside Border in HTML

Responsive Button Sizing with Bootstrap 4

Ways to increase the spacing between content boxes using Bootstrap

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Tips for creating content with ellipsis after every 5 characters

Concern with Isotope's masonry feature

Ways to avoid divs overlapping on a mobile device?

Adjust the size of the font for the placeholder text

Center an image both vertically and horizontally within an Owl Carousel arrow slider

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

Creating dynamic animations with Keyframes in CSS

Change the appearance of the page when it is being displayed within an iframe using CSS

Height and width not being properly set by Ngx-Bootstrap popover