Bootstrap 4 Reponsive Line Breaks

Question

I'm not finding anything in the documentatin to point me in the right direction here and I'm trying to avoid using columns since that could leave gaps between the wording.

I'm displaying the days date on the top of my site using echo date('l') . "<br>" . date('F d, Y');. Which displays the date like this but centered:

Friday November 03, 2017

On small screens such as phones I'd like for it to display as Friday November 03, 2017 without the line break.

I know I could easily just do this and achieve it but it creates gaps between the words since the columns are even in size:

<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 any other ways to achieve this?

What I mean by gap is Friday [gap here due to column space] November 03, 2017.

Solution 1

I never see this question, but, my sugestion is this:

between dates, you can set a div clearfix, this div is only md size, so you make a hidden-sm and hidden-xs class like:

<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> 

it's correct? the clearfix div separate dates only on lg and md sizes.

Solution 2

The more straightforward option is to use the display classes built-in to Bootstrap and hide the <br /> based on screen size.

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

The use of columns or wrapping content in spans is overkill; just throw in a little display class and show/hide as needed.

Solution 3

Here is a solution for your question

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

Comments

[Jesse Elser]

Nice solution which worked. Only thing is hidden-xs and hidden-sm are no longer classes which exist on Bootstrap 4. I did use the corresponding new classes and it worked like a charm. The classes I used was d-none which is display: none; basically and the other was d-md-block which will display it on medium screens and above.

[Michel Simões]

great, guy! The bootstrap is very very fast to front-end dev.

[Jesse Elser]

Oh I absolutely love it because of that. It makes it so much easier to develope.