<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
Home
Services
About
Contact Us
</div>
What changes need to be made?
To align your item to the right, you need to justify your flex items to the end by using justify-end inside your flex container.
You can also align your nav-bar items to the right side by changing flex-row to flex-row-reverse. This way, you get both variations of the items' order.
Code:
<div class="flex md:flex md:flex-grow flex-row justify-end space-x-1">
Home
Services
About
Contact Us
</div>
<!-- or -->
<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
Home
Services
About
Contact Us
</div>
Tailwind-play:
justify-end, flex-row-reverse.
Related
I'm trying to create the following layout:
When the page is smaller - the blue column should go under the red column.
No matter what I try - the issue is the red box always wants to be the same height as the blue box.
https://codepen.io/LeeBow/pen/eYKGzdb
<div class="container-fluid">
<div class="row">
<div class="col-md-8 order-md-1">
<div
style="height:100px;width:100px;background-color:red"></div>
</div>
<div class="col-md-4 order-md-3"><div style="height:300px;width:100px;background-color:blue"></div></div>
</div>
<div class="row">
<div class="col-md-4 order-md-2"><div style="height:100px;width:100px;background-color:green"></div></div>
</div>
</div>
I would like my green box to move under the red box.
The red box always stays the same height as the blue box. It moves under the red box correctly when the screen is smaller.
But the green box will not move under the red box.
Make two blue boxes:
one for desktop (use classes d-md-block d-none) and
one for mobile (use classes d-md-none d-block, which is the opposite from above).
Those classes are Bootstrap classes to manipulate display CSS property.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div style="height:100px;width:100%;background-color:red"></div>
<div class="d-md-none d-block" style="height:300px;width:100%;background-color:blue"></div> <!-- Show on mobile -->
<div style="height:100px;width:100%;background-color:green"></div>
</div>
<div class="col-md-4 d-md-block d-none">
<div style="height:300px;width:100%;background-color:blue"></div> <!-- Show on desktop -->
</div>
</div>
</div>
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).
It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.
<row>
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</row>
And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.
Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.
Your code should be as below:
<div class="row">
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</div>
I'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.
What would be the best way to do the list as in the image. When I tried doing as in the code text gets squashed into the image.
<div data-role="page" id="wrapper">
<div data-role="content">
<div class="stacked-list">
<img src="images/icon_s1.jpg" alt="Online Subscription" class="ui-li-thumb"/>
<div class="para">
<h3 class="ui-li-heading">Online Subscription</h3>
<p class="ui-li-desc">Online access to complete company profiles plus tools & analysis</p>
</p>
</div>
</div>
</div>
</div> <!-- /page -->
Image of End Result http://move.clanteam.com/images/stacked-list_08.jpg
Try list items with thumbnails?
Docs:
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/lists-thumbnails.html
http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-readonly.html