Why isn't it working as expected?
To troubleshoot the issue, adding a border to the columns and enabling word wrap can provide better visibility into what is causing the problem.
For instance, when viewed on smaller screens, you may notice that the words do not fit properly within the col-1 divs. Since words do not wrap by default, this results in the column expanding more than necessary to accommodate the text size:
.col-1 {
overflow-wrap: break-word; border: 1px solid lightgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 aboutlink">
About
</div>
<div class="col-1">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 gmaillink">
Gmail
</div>
<div class="col-1">
Images
</div>
</div>
</div>
1. Understanding Breakpoints and Padding Classes
You can utilize Bootstrap's grid classes to define breakpoints for the columns. For example, these classes specify how much space a column should occupy based on screen size:
<div class="col-6 col-md-8">
Additionally, Bootstrap offers spacing classes that adjust the padding of columns. By using classes like px-*, you can vary the padding size to accommodate content more effectively.
Example demonstration with col-sm-* and px-*:
.row div {border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-2 col-sm-1 aboutlink px-1">
About
</div>
<div class="col-2 col-sm-1 px-1">
Store
</div>
<div class="col-4 col-sm-8">
</div>
<div class="col-2 col-sm-1 gmaillink px-1">
Gmail
</div>
<div class="col-2 col-sm-1 px-1">
Images
</div>
</div>
</div>
2. Utilizing Bootstrap Auto Classes
In scenarios where a rigid structure is not required, consider using the col-auto Bootstrap classes which dynamically adjust column width based on content length. This eliminates the need to specify fixed proportions for column widths (e.g., 1/12 or 2/12).
The following example showcases setting the first 2 and last 2 columns as col-auto to resize according to their content, while assigning the middle column the col class to occupy remaining space:
.col-auto{ border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-auto aboutlink px-1">
About
</div>
<div class="col-auto px-1">
Store
</div>
<div class="col">
</div>
<div class="col-auto gmaillink px-1">
Gmail
</div>
<div class="col-auto px-1">
Images
</div>
</div>
</div>
Note: The justify-content-* classes are specific to flexbox layouts and hence have been excluded from the examples related to grid classes.