I want to display a optional text suffix within a vertically centered flexbox/bootstrap column. It should only be displayed on small screens. The following code works, but only if I use the "display:contents" on the span-element, which doesn't have a perfect browser support. If I remove the "display:contents", the text suffix is displayed as another column. How can I make the text suffix flow with the previous text, without using display:contents?
<div class="row">
<div class="col-2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
</div>
<div class="col d-flex align-items-center">
Title text Title Text
<span class="d-lg-none" style="display:contents">
(Optional column is here on small devices)
</span>
</div>
<div class="col-2 d-none d-lg-flex align-items-center">
Optional column
</div>
</div>
https://jsfiddle.net/9z81tvsx/
d-flex is display:flex;
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it
generates an inline box. Otherwise it generates a block container box.
https://developer.mozilla.org
You are using .d-flex on its parent. Therefore, the span.d-lg-none has display:block in small size screen. And hence, it behaves like a column.
You can fix the issue by wrapping the text in a Paragraph element.
<p>Title text Title Text <span class="d-lg-none" >(Optional column is here on small devices)</span></p>
Related
Using AdminLTE template for creating dashboard layout with ANGULAR 5 + bootstrap 3.4,
In one of the components I have to align image, title and a dropdown in a row which when resized causes the dropdown to overlap the text content of title.
full-page view :
resized or minimized browser:
HTML snippet:
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<h4 >Search Requests</h4>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
I've tried adding individual div's to each element & then add boostrap "col" sizing but the drop down always seems to be overlapping the title, could I be simple as missing something since I'm a beginner to responsive designing?
Appreciate your response
What are you trying to achieve? How should the layout be?
The problem is in css of your h4, it's not formatted. h4 is inline, so it will treated like common text.
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<div style="white-space: normal;"> <-- give css
<h4 >Search Requests</h4>
</div>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
is it set to nowrap? and check the overflow of the text. Better to wrap h4 in a div so you can set the overflow and wrap text
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Is there a possibility to give a bootstrap 4 col the width of its child, which is a container class?
<div class="container-fluid">
<div class="row">
<div class="col bg-secondary m-0 p-0">
text left
</div>
<div class="col-auto bg-primary">
<div class="container bg-primary m-0 p-0">
text mid
</div>
</div>
<div class="col bg-secondary m-0 p-0">
text right
</div>
</div>
</div>
I basically want to be able to put content on the left and right of a container, but I don't want my container to change in size because of this, because this left and right content won't be present on every page, and I want a consistent container width cross pages.
https://jsfiddle.net/5gt9uoqb/
Update:
Here's an image of what I would like to achieve: ibb.co/tcKM6S0 . At the bottom is a 'normal' page, with a centered container. This is a div with the standard container class that ships with bootstrap. At the top is a new page type I would like to create. It should have the exact same container like the other page, but I want to be able to put content in the grey zones, like, for example, some social icons (blue in the img). Wrapping the normal pages in a column too is not an option in my set up because of other stuff.
if you know about position property, then you can handle this issue without touching the container class.
For that, you need to a parent class of all child element. I mean after the body tag you take a class and give it position relative the which content you want to be left give it position absolute and left:0px;(you can space from left according to your), and if you want content right then you give it right:0px;
Is there a way to center vertically a content inside a segment class div? I've got the following markup:
<div class="stretched row">
<div class="two wide column">
<div class="ui basic segment">
<select>
<!-- OPTION VALUES IN HERE -->
</select>
</div>
</div>
<div class="column">
<div class="ui basic segment>
<!-- DIV CONTENT -->
</div>
</div>
<div class="column">
<div class="ui basic segment">
<!-- DIV CONTENT -->
</div>
</div>
Now, thanks to the stretched row class, all 3 columns have the same height, and so do the segment divs inside them, looking like this:
I'd like that the content inside the 3 segments was vertically centered inside of them. Instead, they always appear at the top. I've tried adding class="ui middle aligned basic segment" but it doesn't work. Adding class="middle aligned column" to the parent columns center the segment inside of them but they don't take up all the vertical space of the column and, as they have border and colored background, it looks odd (each segment has its own height).
I'd like to avoid adding padding to the segments, because I don't know the heights of them and its content varies from 1 line (a select) to several lines of text (from 2 to 7 lines, depending on what the user selects).
Thanks!
As #VXp suggested, applying {display: flex; align-items: center} to the segment class worked perfectly.
<div class="input-group Flugo_group">
<h4 class="text-center">or</h4>
</div>
i am try to show in center but not working.second time using position relative but not working properly in responsive design.
I was facing the same problem in Bootstrap 4.1.0. Here is what I figured out:
I was doing this (having my paragraph inside div with class "row"):
<div class="container-fluid">
<div class="row" style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Later I removed the class and it worked.
<div class="container-fluid">
<div style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Bootstrap 3
v3 Text Alignment Docs
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
v4 Text Alignment Docs
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
In Bootstrap 4, for aligning center position:
Use class= "mx-auto"
example:
<p class="mx-auto">Kailash</p>
It will align the text horizontally center position.
I solved it this way.
<section className="d-flex">
<span className="mx-auto">Hello World!</span>
</section>
Bootstrap v5.
The input group field has display: flex which causes elements inside, including your paragraph, to not be at 100% width, but the width of their content only. The text is centred, however, the length of the paragraph is only as long as the characters or. To counter this you could use mx-auto which would centre the paragraph using margin auto on the X-axis, or w-100 which will make the paragraph be 100% the length of the parent instead of just something like width: max-content. The issue here isn't with the Bootstrap utilities, but rather flexbox.
I would strongly suggest that you use input group as shown in the documentation only. This is intended to create an inline group of buttons and it is not expected to have any other elements. I would altogether suggest removing the input group class.
It's most likely that you have your own stylesheet and your <h4> tag has text-align: left; or something like that. It could be .input-group or .Flugo_group as well. We'd need to see your code though.
Edit: Or even something as simple as what contains any of your code could be the problem.
UzumakiL answer was ok so my answer is based on his example.
I tried to fix it bootstrap way and found you need to add a col to center the header.
Try add col then center the header in there.
Something like that:
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-12 text-center">
<p class="text-success"> Text Center</p>
</div>
</div>
</div>
jsfiddle solution
I am building a web site. My web site will have blocks of content. Each block will have a title, some text, and an icon. My challenge is, I'm trying to vertically center each icon in the block. Currently, I have the following HTML or you can look at the jsfiddle.
<blockquote>
<div class="row">
<div class="small-10 columns">
<h4>The Block Title</h4>
<em>Some small blurb</em>
<p>Here is a paragraph relating to this block. It may include a couple of sentences. These sentences will wrap. Ultimately, the heart needs to be vertically centered.</p>
</div>
<div class="small-2 columns">
<span class="fi-heart" style="font-size:4rem;"> </span>
</div>
</div>
</blockquote>
In this code block, I'm using Zurb Foundation to help with layout. However, I can't seem to get the heart icon to center vertically in my right column. Does anyone know how I can do this with CSS?
Thank you
Add a line-height property to your inline style for <span class="fi-heart"> with a value equal to the font-size:
font-size:4em; line-height: 4em