Mo Pishdar
Reputation: 123
Aligning bootstrap spans using CSS
I am trying to have a basic bootstrap layout for a workday scheduler app but when the width of the text content increases it affects the vertical alignment of the spans that I put the hours of the day in as you can see in the picture:
Is there any way that I can force those spans on the left to align vertically using CSS or maybe even a bootstrap class? Here is my HTML:
<!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">
<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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">10 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">11 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">12 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">1 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">2 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">3 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">4 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">5 PM</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>
</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>Upvotes: 0
Views: 107
Answers (4)
Leschge
Reputation: 164
I see you are using jQuery, if you want to use a dynamic approach without using fixed widths this would be one way to go:
var maxWidth = 0;
$(".input-group-prepend").each(function(){
if( $(this).width() > maxWidth ) {
maxWidth = $(this).width();
}
});
$(".input-group-prepend").width(maxWidth)
$(".input-group-text").width("100%")
Upvotes: 1
Sebastian Brosch
Reputation: 43574
You can add this CSS to align the time labels:
.input-group .input-group-prepend .input-group-text {
display: inline-block;
min-width: 95px;
text-align: right;
}
Also make sure to wrap you form into an additional container to avoid changing the labels on the whole page (or other sites using the same CSS).
Demo:
.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 -->
<div class="input-group input-group-lg">
<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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">10 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">11 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">12 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">1 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">2 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">3 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">4 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">5 PM</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>
</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>Upvotes: 1
Ramon de Vries
Reputation: 1342
since i assume you won't grow larger then 2 numbers and either am or pm, you can give them all a fixed width like width: 80px;, and if needed for a responsive design add a media only rule to decrease the amount of pixel depending 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">
<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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">10 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">11 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">12 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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">1 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">2 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">3 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">4 PM</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>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">5 PM</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>
</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>Upvotes: 1
Eytan
Reputation: 140
Have you tried to give a min-width in css to solve the issue?
.input-group-text{
min-width: 100px;
}
Upvotes: 1
Related Questions
- bootstrap horizontally align elements
- bootstrap - aligning columns within a div
- bootstrap columns not on aligned within row
- Bootstrap columns not aligning besides each other despite of being in the same row
- Alignment issues in Bootstrap4
- How do I align elements horizontally?
- Align items in div bootstrap
- aligning columns in bootstrap 4
- Align elements using Bootstrap
- Aligning the elements(bootstrap 4)