Good morning,
I use Bootstrap 4.5 and try to make a nice footer for my university site.
I use this :
<div class="container-fluid d-flex justify-content-center">
In order to have my footer centered and not the blocks being far away from each other.
But, on bigger screen (i emulated it with Firefox), the text is on two lines, because of the centered option and i would like to be on one line because it had space :
Here is the full code if it can be helpful :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">some text</h4>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
<span><i class="fa fa-chevron-right pr-2"></i>some text sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
</div>
<div id="footer_ipp" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i>some textsome textsome textsome texttextsome textsome text
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<i class="fa fa-facebook-square fa-3x mr-3"></i>
<i class="fa fa-twitter-square fa-3x mr-3"></i>
<i class="fa fa-linkedin-square fa-3x mr-3"></i>
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
</div>
Is this possible ?
Thank you !!
It is not possible because you used bootstrap pre-define class col- to adjust width.
If you want to convert two lines text into one class, your text will cut
It is possible only to not to use Bootstrap class, you use custom width to all columns
Related
I have a dropdown menu in a row in a portlet.
<div class="col-md-6">
<p class="todo-red todo-inline">Gestionnaire : <span class="bold">Name</span></p>
</div>
<div class="col-md-5">
<span class="bold caption-subject uppercase font-grey-mint">Inactif depuis : 26 J</span>
</div>
<div class="col-md-1">
<div class="btn-group">
<a class="btn btn-sm btn-default todo-add-button" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" aria-expanded="false"><i class="fas fa-volume-mute" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil" aria-hidden="true"></i> 1 jour </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 3 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 15 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> Définitif </li>
</ul>
</div>
</div>
It's look like that:
dropdown behind the portlet
The dropdown menu is behind the portlet, I need to have it above the portlet.
I tried to z-index with position:absolute but nothing work.
I haven't find any good help on SO.
Have you any ideas about my issue?
Thank you
EDIT: Please find the JSFiddle illustration: https://jsfiddle.net/L5o0jh4k/
This question already has an answer here:
Align bootstrap-cards contents
(1 answer)
Closed 4 years ago.
I want to achieve the following result with Bootstrap 4's card-group:
Same height of everything (card-header, card-title and small subtext if present, each first list item starts at the same vertical position, buttons in footer).
My code so far:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-group card-group-md">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Kostenlos (Einführungsangebot)</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title">
Kostenlos
</h5>
<small>Preis inkl. MwSt.</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität in aktuellen Auktionen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
5 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
7 Tage kostenloser Archiv-Zugang zu<br>über 25 Millionen Auktionslosen<br><strong>am Tag Ihrer Registrierung</strong>
</li>
<li>
<i class="fa fa-fw fa-check"></i>
7 Tage kostenloser Zugang zu <br>unserem Künstlerindex mit Charts & Analysen<br><strong>am Tag Ihrer Registrierung</strong>
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Basic</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title"> 9,95 € <span class="period">/ Monat</span> </h5>
<small>Preis inkl. MwSt.</small>
<small>Mindestvertragslaufzeit: 12 Monate *
</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
25 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Künstlerindex mit Charts & Analysen
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Premium</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title"> 29,95 € <span class="period">/ Monat</span> </h5>
<small>Preis inkl. MwSt.</small>
<small>Mindestvertragslaufzeit: 12 Monate *
</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
500 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Künstlerindex mit Charts & Analysen
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Auf Anfrage</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title">
Auf Anfrage
</h5>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
Individueller Scout-Service
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Beliebig viele Suchaufträge (> 500)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Alle LotSearch Services
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Sie erhalten zunächst unsere kostenlose Mitgliedschaft, bis wir Ihnen ein individuelles Angebot vorgeschlagen haben, mit dem Sie einverstanden sind.
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
</div>
https://codepen.io/anon/pen/EdpraE
At the moment I have the problem, that the text wraps in the grey column on narrow (Kostenlos (Einführungsangebot)) which breaks the clean layout.
The following image shows my problems:
Is this possible with card-group or do I need to fiddle with row+col classes? Maybe possible with some flexbox magic?
You can't expect the elements to have the same size since the text grows down.
What I do in this specific scenarios is to set a min-height to the specific section, so imagine you want the header to have the size in the first card, just set a min-height to the header like 150px;
Regarding the list, if has more items all the sections should grow related to that section. You can do that by applying height 100% on the cards;
I think in that specific scenario what you need is just to set a min-height to the card-header, tried applying min-height: 109px
This is possible by 2 ways.
The first one (CSS-ONLY) is the easiest one but the ugliest one.
This is to set the height of the header to the 2 rule display.
This is ugly because if there are only fields with 1 rule it will have too much space. If it has more, the text will come out of the box. However if you make your text responsive by using rem,vw,vh,.. It will scale as well.
The second one (JS) is way prettier but works with javascript. This looks for the biggest size and sets all other divs to this.
You can call this event on window.resize.
Documentation:
Resize
JS to equalize heights
just a quick one. I have 3 Font Awesome icons that i'm using for contact buttons on my page. These are aligned vertically and centered within a container div. I also have text next to each icon, which results in both icon and text being centered on the page. What i'm after is to center the icons vertically and have the text follow separately. I believe I could wrap the icons in a container then all the corresponding text in another container, but I realise this would look messy in my CSS. There must be a simple answer out there that i'm not realising. If you don't understand what i'm going on about please view the code snippet below. Thanks for any feedback.
<section class="contact-main">
<div class="container">
<div class="email">
<i class="fas fa-envelope fa-3x"><p> Email</p></i>
</div>
<div class="phone">
<i class="fas fa-phone-square fa-3x"><p> Phone</p></i>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x"><p> Facebook</p></i>
</div>
</div>
</section>
You can use fixed-width icons with class fa-fw . Here is the link.
HTML
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
I hope it helps.
Something like this? Fiddle
<body>
<section class="contact-main">
<div class="container">
<div class="list-group">
<div class="email">
<i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
</div>
<div class="phone">
<i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
</div>
</div>
</div>
</section>
</body>
Was overthinking the whole thing. I just moved them into alignment using position: relative. Lightbulb finally lit up!
i have this piece of code which not in order.i am trying to make it appear in the middle of the page but i want to to stick to one line in verticle.
current outcome is as below.How do i adjust contacts inline?
<div class="col-md-12">
<div>
<ul class="list-icons" style="text-align: center;margin-left:0;">
<li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
<li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
<li "><i class="fa fa-envelope pr-10 text-default" style="font-size:15px"></i>contactus#testmail.com</li>
</ul>
</div>
<br>
</div>
add text-align:center to the div containing your ul, then change the ul text-align:center to text-align: left and add display: inline-block
<script src="https://use.fontawesome.com/89d51f385b.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<div style="text-align:center;">
<ul class="list-icons" style="text-align: left;margin-left:0; display:inline-block; list-style-type: none;">
<li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
<li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
<li><i class="fa fa-envelope pr-10 text-default " style="font-size:15px"></i>contactus#testmail.com</li>
</ul>
</div>
<br>
</div>
I am creating a small landing page at http://www.saleshuddlegames.com
on the desktop everything is fine but when I start using tablets and smartphones, everything starts going out of alignment. I can't seem to make anything centered.
Specifically look at my .footer
<footer>
<div class="row">
<div class="col-md-4 col-sm-10 col-sm-offset-2 col-xs-12 centered">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright col-md-6 col-md-offset-4 col-sm-10 col-sm-offset-2 col-xs-12">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>
I used a centering snippet from a previous post:
.centered {
float:none;
margin: 0 auto;
}
Any Ideas??
Have you tried using the text-center class from bootstrap?
I've juggled the selection of columns for the social icons, and removed them all for the copyright text.. now this looks good here at all browser sizes:
<footer>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12 text-center">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright text-center">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>