Capitan Duke Capitan Duke - 1 month ago 9
CSS Question

Long URLs don't stay inside the Bootstrap column

I'm developing a WordPress theme with Bootstrap grids, and I see a problem in mobile view. Everything is fixed into the Bootstrap column, but there are some links in the references section that don't stay inside the column and make a mess of my grids and create a horizontal scroll bar:

enter image description here

enter image description here

I've tried everything and nothing works, please I need help.

Here is the code from the

single.php
:

<div class="c-content-box c-size-md" style="margin-top:4%;">
<div class="container">
<div class="row">

<div class="c-content-blog-post-card-1-grid">
<div class="row">

<div class="col-md-12">
<div class="col-md-8 wow animate fadeInLeft">

<div class="c-media 2 img">
<div class="c-overlay-wrapper">
<div class="c-overlay-content">
<?php the_post_thumbnail( '', array( 'style' => 'max-width:100%; height:auto;' ) ); ?>
</div>
</div>
</div>

<?php
while ( have_posts() ) : the_post();

get_template_part( 'template-parts/content', get_post_format() );

?>

<div class="col-md-12 c-margin-b-60">
<?php
the_post_navigation( array(
'prev_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">Post Anterior</button>',
'next_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">Próximo Post</button>',

));

?>
</div>

<?php
echo '<div class="col-md-12 c-margin-t-20">';

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

endwhile; // End of the loop.
echo '</div>'
?>

</div>



<div class="col-md-4 ">
<div class="col-md-12 wow animate fadeInRight" >
<?php get_sidebar(); ?>
</div>
</div>



</main><!-- #main -->
</div><!-- #primary -->
</div>
</div>
</div>
</div>
</div>



Answer Source

You'll need to add some CSS to word-wrap your text.

div {
  width: 100px;
  border: 1px solid black;
  margin: 5px;
}
.wrapped {
  word-wrap: break-word;
}
<div>https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>

<div class="wrapped">https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>