Responsive Line Breaks in Bootstrap 4

I can't seem to find any information in the documentation to guide me in the right direction here. I'm hesitant to use columns as it could result in gaps between the text.

Currently, I have the date displayed at the top of my website like this using 

echo date('l') . "<br>" . date('F d, Y');
. However, it appears centered with a line break:

Friday November 03, 2017

For smaller screens, such as phones, I would like the date to appear as Friday November 03, 2017 without the line break.

I am aware of a simple solution that involves setting up columns to achieve this, but it results in gaps between the words due to the even distribution of column sizes:

<div class="row">
<div class="col-sm-6 col-md-12">
<?php echo date('l'); ?>
</div>
<div class="col-sm-6 col-md-12">
<?php echo date('F d, Y'); ?>
</div>

Are there alternative methods to accomplish this?

By "gap," I mean 

Friday [gap here due to column space] November 03, 2017
.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This question is new to me, but I have a suggestion to handle it in a unique way:

To separate dates, you can insert a div with the class clearfix, which is specifically designed for medium-sized screens. You can then create hidden classes for small and extra small screens like this:

<div class="row">
       <div class="col-sm-6 col-md-12">
       <?php echo date('l'); ?>
      <div class="clearfix hidden-xs hidden-sm"> </div>


    <?php echo date('F d, Y'); ?>
       </div>
    </div>

Does this approach look correct to you? The clearfix div will only appear between dates on large and medium screens.

Answer №2

If you want a simpler solution, you can take advantage of Bootstrap's display classes to hide the <br /> element based on the screen size.

echo date('l') . "<br class='d-md-none' />" . date('F d, Y');

There's no need to complicate things by using columns or wrapping content in spans; just use the display class to show or hide content as necessary.

Answer №3

We have found a solution to your query:

    <div class="container">
    <div class="row">
    <div class="col-lg-6 col-md-12">
    <div class="row">
    <?php echo date('l'); ?>
    </div>
    </div>
    <div class="col-lg-6 col-md-12">
    <div class="row">
    <?php echo date('F d, Y'); ?>
    </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

identify when the bottom of a container is reached during scrolling through a window

On my website, I have a section with products displayed in the center of an HTML page. I am looking to implement an AJAX call that will load additional products when the user reaches the bottom of this product container by scrolling down. How can I detec ...

javascripthtmljqueryajax

Tips for ensuring Opera browser compatibility with buttons using the CSS background image property

Is there a way to make background images work on buttons in Opera web browser using CSS? I've tried using the background image property, but it doesn't show up when I use Opera. Strangely enough, it works fine in Firefox. However, I have noticed ...

htmlcssbackground-imageopera

Utilizing the Jquery ready method in conjunction with the load function

While utilizing the ready() method to access the DOM, I encountered an issue where jQuery was returning undefined when trying to access an element. Even after nesting the ready() function inside $(window).on("load", function()), there were still instances ...

javascriptjqueryhtml

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

Chrome experiences a crash during regular expression matching operations

I have a challenge where I am attempting to validate 50 email addresses separated by commas using regex. Strangely, every time I run this operation, Chrome crashes. However, Safari seems to handle it without any issues. Below is the code snippet that I am ...

javascriptjqueryhtmlregexgoogle-chrome

Discovering hidden elements using Overflow:hidden

I need help figuring out how to display the cropped part of my text without using scroll bars in css. For example: td { overflow: hidden; } The hidden content is important, but the table property is fixed. table { table-layout: fixed; } I want the ...

css

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

javascriptphpjqueryhtmlajax

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

htmlcsssass

What is the best way to make a textview span its layout in an android app?

Is there a way to style text in a TextView layout itself without using any programming? I have about 20 XML files and no activity associated with them. I've tried using tags but it doesn't seem to work. android:text="Lets look how to make < ...

androidtextviewhtml

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

Looking for a way to add a CSS effect that reveals another image or text when hovering over an image?

My company's website features 10 country flags that, when clicked, display the entire site in that country's language for the user's session. However, I want to take it a step further and have a small image of the respective country appear w ...

asp.netcssvisual-studiohtmlhover

BS 5.0.2 - Successfully preventing default behavior of dropdowns - Effective in BS4, however not compatible with BS5

With Bootstrap 4, I could use jQuery to prevent dropdowns from showing based on a condition being met. However, in version 5.0.2, this approach no longer works and the dropdowns still display as usual. It seems like stopPropagation() and preventDefault() a ...

twitter-bootstrapbootstrap-5

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

javascripthtmldatedatepicker

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

javascripthtmlcssprintingmedia-queries

Is there a bug with the CSS Safari selector for elements focused together?

Looking for a solution using the element+element-Selector to modify CSS for an element following a button. This code snippet functions in Chrome, Edge, and Firefox but not Safari on MacOS: .button:focus+.change{ color: red; } <p>When you focus ...

csssafaricss-selectorsfocus

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1 For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them bef ...

javascriptcssruby-on-railsherokuruby-on-rails-4.1

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

javascriptjqueryhtmlcsslayout