Bootstrap 3 class visible-lg moves span to a new line
Update for Bootstrap v3.2.0
This is now natively solved in Bootstrap v3.2.0 with this commit
According to the responsive classes documentation:
As of v3.2.0, the .visible-- classes for each breakpoint come in three variations, one for each CSS display property value listed below:
Group of classes | CSS display
.visible-*-block | display: block;
.visible-*-inline | display: inline;
.visible-*-inline-block | display: inline-block;
So in your case, you'd want to use:
<p>Device is:<span class="visible-lg-inline">Large</span></p>
Original for Bootstrap v3.0
In Bootstrap 3.0, all visible and hidden responsive classes use display:block !important;
You'll have to override that if you want to display elements inline:
@media (min-width: 1200px) {
span.visible-lg {
display: inline !important
}
}
Working Demo in jsFiddle
For a more robust approach, here is a library that adds extension classes for each display type
Other Instances
Asked about on Stackoverflow:
- Bootstrap3 .visible-* .hidden-* display inline
Reported in Bootstrap Issues:
- #4929 - Responsive utility classes may cause unexpected wrapping
- #7808 - Using display inherit in responsive utilities causes elements to be wrongly displayed
- #8500 - responsive class usage with inline element
- #8869 - responsive .hidden-* classes change from display block to inline-block
- #10263 - visible-xs makes display=block even for inline elements
Bootstrap3 .visible-* .hidden-* display inline
Update for Bootstrap v3.2.0
This is now natively solved in Bootstrap v3.2.0 with this commit
According to the new responsive classes documentation:
As of v3.2.0, the .visible-- classes for each breakpoint come in three variations, one for each CSS display property value listed below:
Group of classes | CSS display
.visible-*-block | display: block;
.visible-*-inline | display: inline;
.visible-*-inline-block | display: inline-block;
For example, you could use:
<p>Device is: <span class="visible-lg-inline">Large</span></p>
Other Instances
Asked about on Stackoverflow:
- Bootstrap 3 class visible-lg moves span to a new line
Reported in Bootstrap Issues:
- #4929 - Responsive utility classes may cause unexpected wrapping
- #7808 - Using display inherit in responsive utilities causes elements to be wrongly displayed
- #8500 - responsive class usage with inline element
- #8869 - responsive .hidden-* classes change from display block to inline-block
- #10263 - visible-xs makes display=block even for inline elements
Span element keeps jumping to next line in HTML
Change d-md-block to d-md-inline-block.
You have d-none which makes the element disappear and then reappear on medium display and upwards with d-md-block but this forces the element to take up the whole width of the container and push anything else below it. d-md-inline-block does the job of making the element visible while not taking up the whole width of the container.
Bootstrap 3 div with span issue
The width of the spans depends on the font size, so you can't create a new line when it reach the end, but you can use the css float property.
"float: left;" on your spans, and a "clear: both;" on the next element to adjust the height of your container.
How to get text to span a single line?
<span class="d-none d-lg-inline-block">
This is what you're looking for! :) However, the CSS would have been
display: inline-block!important;
Without the important, I think Bootstrap's CSS would have overridden yours anyway.
Bootstrap glyphicons appearing on the next line instead of at the end of an input element
Just add an input-group container, like this:
<div class="form-group" id="section_blocks">
<label class="control-label col-lg-3" for="id_blockdisplay">
Select Element
</label>
<div class="col-lg-9">
<div class="input-group">
<input class="form-control" id="id_elementdisplay" placeholder="Element" type="text" value="Element">
<span class="input-group-addon glyphicon glyphicon-list">
</span>
</div>
</div>
</div>
There are some examples and additional informations on how to use them on the Bootstrap 3 manual pages.
Prevent line-break of span element
Put this in your CSS:
white-space:nowrap;
Get more information here: http://www.w3.org/wiki/CSS/Properties/white-space
white-space
The white-space property declares how white space inside the element is handled.
Values
normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.
nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.
pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
inherit
Takes the same specified value as the property for the element's parent.
Bootstrap push div content to new line
Do a row div.
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"><div class="grid"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div> <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div> </div> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div> </div></div>Don't let Bootstrap row content to jump in the new line
The problem is that the readme block has a float right outside the row, while the row itself has no width. You can add an col-md-12 class within the row to force a full width tag list, but that will push the read more outside.
While I would go for a manually written CSS Flexbox based solution for this problem, with bootstrap you can do something like this:
<div class="row">
<div class="col-md-auto order-md-12">
read more here
</div>
<div class="col-md-auto order-md-1">
tags here
</div>
</div>
This will render read more and tags next to each other on medium and larger displays, and order read more at the very end.
On smaller displays, cols are full width with read more positioned before the tags.
I copied your example where I applied it.
It is not perfect, but getting there. I would advise you however to look at what elements you use. Tags have meaning in HTML; divs are pretty much meaningless. For links, use the <a>-element, not an onclick handler, for lists use <ul><li>; and definitely use <divs> with <p>'s wrapped in it per tag. If you want to take the easy route, a simple list of <a>'s would probably be sufficient for the tags.
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
}
.read-more p a span:hover {
color: #0085a1;
}
.title-text:hover {
color: #337ab7;
cursor: pointer;
}
.title-text {
font-family: 'Lato';
font-weight: 700;
font-size: 30px;
color: #404040;
margin-bottom: 10px;
}
.tag p span:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.date {
font-size: 15px;
color: #707070;
margin-left: 15px;
font-family: 'Work Sans';
}
.read {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.author {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.desc p {
font-size: 17px;
font-family: 'Work Sans'
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e34c14145.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<h1 class="title-text">Loading Really Large Datasets Efficiently With Generators (Pytorch &
TensorFlow)</h1>
</a>
<div class="post-meta" style="text-align: center;">
<div class="row">
<p class="date"> <i class="fas fa-calendar-week" aria-hidden="true"></i> Posted On
May 5, 2022 |</p>
<p class="read"> <i class="fas fa-clock" aria-hidden="true"></i><span
class="span_read"> 10 minutes</span></p>
</div>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
<div class="row" style="">
<div class="col-md-4 order-md-12">
<div class="read-more" style="float: right;">
<p style="font-family: 'Open Sans'; font-weight: 700; font-size: 18px;"><a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow" style="text-decoration: none; color: black;"><span>[Read
More]</span></a></p>
</div>
</div>
<div class="col-md-8 order-md-1">
<div class="col row"> <p style="font-family: 'Open Sans'; font-size: 1rem">Tags:</p>
<!-- THIS IS WHERE PROBLEM STARTS -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('data')">
<span>#data</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('pytorch')">
<span>#pytorch</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('tensorflow')">
<span>#tensorflow</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Specify a line break point for mobile/responsive design
you could try this. https://jsfiddle.net/5vwh46f8/1/
Putting the second word in a span and adding a style inline-block.
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
</div>
</div>
</div>
</div>
<style>
h4 span{
display: inline-block;
}
</style>
Related Topics
Responsive Media Query Not Working in Google Chrome
Is There a Way (Or a Plugin) to Make Vim Generate a Code Outline for CSS
Difference Between Bootstrap.CSS and Bootstrap-Combined.Min.CSS
Wget Downloads CSS @Import, But Ignores Files Referenced Within Them
Do Unused CSS Styles Affect Load Times
R Shiny: Color Fileinput Button and Progress Bar
How to Draw Triangle with Transparent Background with Border
How to Isolate Vuetify Global Styles
Set Div Width to Content Without Inline-Block and Keep Divs Under Each Other Center Aligned
Auto-Contrast Font Color to Background
CSS: Overflow-Y: Scroll; Overflow-X: Visible
Is It Somehow Possible to Style an Iframes Before/After Pseudo-Element
How to Give Class to a Host Element in Angular 2 with @Hostbinding
CSS - Floating Two Elements Side by Side
Horizontal Scroll (With Arrows) for Angular Package