i have a div with a few elements in it, and i want to achieve something like this
however when i add border-bottom to my h5, the border takes the length of the div not the h5 element like so
this is the code or tailwind classes that i have used
<section>
<div className='grid md:grid-cols-2 gap-10'>
<div>
<h5 className='text-custom-orange font-medium border-solid border-b-2 border-custom-orange'>BLOG'S</h5>
<h1 className='text-5xl font-medium'>Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Add the max-w-fit utility to your h5.
This way, the maximum width of your h5 element will fit its content.
<section>
<div class="grid md:grid-cols-2 gap-10">
<div>
<h5 class="text-custom-orange font-medium border-solid border-b-2 border-custom-orange max-w-fit">BLOG'S</h5>
<h1 class="text-5xl font-medium">Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Tailwind-play
Another solution is to apply text decoration utilities:
<section>
<div class="grid gap-10 md:grid-cols-2">
<div>
<h5 class="text-custom-orange font-medium underline decoration-gray-300 decoration-2 underline-offset-4">BLOG'S</h5>
<h1 class="text-5xl font-medium">Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Tailwind-play
underline - Add an underline under the text [Docs].
decoration-gray-300 - Change the underline color to gray [Docs].
decoration-2 - Change the thickness of the underline to 2px [Docs].
underline-offset-4 - controls the offset of the text underline [Docs].
Related
I want to have an if statement that if there isn't any icon the header is grey, if not there is no change.
I'd like to have something like this:
<h3 className={ icon ? "" : {style.grey} } >Lorem ipsum dolor</h3>
Do you know how to implement it with style and css loader?
my code:
import style from "./Article.css";
const Article = ( { image, icon } ) => {
return (
<div className= { style.article }>
<article>
{image ? <img className={ style.imgArticle } src= { image } /> : ""}
<h3 className={ icon ? "" : style.grey } >Lorem ipsum dolor</h3>
{icon ? <img className={ style.imgArticleTiny } src={ icon } /> : ""}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</div>
)
}
export default Article;
css :
.article h3 .grey {
color: #666666;
}
PROBLEM SOLVED
<h3 className={ icon ? "" : style.grey } >Lorem ipsum dolor</h3>
works.
I've just used bad css selector. It should be:
.article h3.grey {
color: #666666;
}
my bad
I'm working with vuetify expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I'm bot sure how to add color to this. As you can see I've been trying to add color="#26c6da" to multiple components without success.
<template>
<!-- <v-layout align-start > -->
<!-- <v-layout align-start justify-center row fill-height> -->
<v-container row fill-height justify-center style="max-width: 1200px" class="mx-auto" color="#26c6da">
<!-- <v-layout row fill-height=""> -->
<!-- <v-layout row justify-space-around> -->
<v-flex class="mx-auto" color="#26c6da">
<v-expansion-panel style="max-width: 1200px" class="mx-auto" color="#26c6da" >
<v-expansion-panel-content v-for="(item,i) in items" :key="i">
<div slot="header" class="headline font-weight-bold">{{item.header}}</div>
<v-card >
<v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
<!-- </v-layout> -->
</v-container>
Here is a component codepen link:
https://codepen.io/anon/pen/OdJKqm?&editable=true&editors=101
How can I get this working?
Try to add a standard style like style="background:#26c6da;color:white" to any element you want :
new Vue({
el: '#app',
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify#1.4.0/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<v-expansion-panel>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i" style="background:#26c6da;color:white">
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
I would try to make the image align with the border line. But I cannot figure out. (As the image below) And I am not sure why the well is not covering my content. Not sure what is the problem. Hope you can help.
Any help will be appreciated!
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
<div class="row">
<div class="well">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
I think this little correction does the work
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
and why are you using this css ?
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
I added some little changes as per your comment
add this to your css
<style>
.div-img-padLftZero{
padding-left:0px;
}
</style>
then make your code like this
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
Now it is left aligned as you desired
OK, first of all I tried to show the issue with Sassmeister, but it's so f... slow to compile that I just gave up. I use Susy, SCSS and Haml.
So here is the image that I think is relevant. I want to make the black bar at the top (background-color) to touch the black sidebar at the side. In other words - to add background color to gutter.
Here's my code:
HTML:
<div class="page">
<div class="nav">
<div class="brand">
<a class="name" href="/">Tomasz Gałkowski</a>
</div>
<div class="work">
<a class="projects" href="#">projects</a>
<a class="timeline" href="#">timeline</a>
</div>
<div class="blog">
<a class="articles" href="#">articles</a>
<a class="about" href="#">about me</a>
<a class="contact" href="#">contact</a>
</div>
</div>
<div class="content">
<div class="header">
<h1>Tomasz Gałkowski</h1>
<h2>web developer</h2>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
<small>Tomasz Gałkowski, 2016</small>
<p>gitlab, facebook, twitter</p>
</div>
</div>
</div>
And (relevant) SCSS:
$susy: (
columns: 12,
gutters: 1/2,
debug: (image: show)
);
.page {
#include container;
#include clearfix; // from compass
}
.nav {
#include span (3 of 12);
background: $background-dark;
height: 100vh;
}
.content {
#include span(last 9 of 12);
background: $white;
.header {
background: $background-dark;
}
}
I was trying some stuff with bleed() or gutters() but it just didn't work the way I wanted it to work. I'm just starting to learn Susy and though I crawled through the whole documentation I wasn't really able to grasp this concept. :)
Susy doesn't really consider colors you'd want for gutters, as they are paddings or margins between grid elements.
The gutter between the nav and .content elements is just a margin between elements.
As the picture above illustrates, between the dark-yellow and the pink-ish elements, there is just a margin.
You can achieve having $background-dark as a background in the shape you described if you add the background to the container wrapper, being .page (that's the element you see between your columns) - the green element on the illustration. By then putting white background on the blue elements you want (.main and .footer), you'll pretty much be there.
Depending on what you're after with the space beneath .footer you may need to extend it's height somewhat, since .page will be visible.
If you're really set on not putting a background on .page, you could use the pseudo element &:before of .content to overlay the gutter between your columns. If feels like patch-work and I wouldn't recommend it.
Even though miphe's answer goes more in-depth I decided to add this one as well to be more case-specific. After some research I decided that what I was trying to achieve is an anti-pattern.
What I did to get the result I wanted to get: I set fixed width on the sidebar and used .content as #include container; instead of .page and moved .content to the right by setting padding-left: $sidebar-width where $sidebar-width is the fixed value.
I'm working on a project in Bootstrap 3 and I'm having a little problem with the text in extra small view. The text is basically flowing out of its container, but it's meant to stick and break accordingly. I've tried breaking the text with different CSS properties, such as word-wrap, word-break, text-wrap. None of these worked.
This is how it looks like:
This is how the code looks like:
<div class="comments-area row">
<div class="user-info col-lg-2 col-md-2 col-sm-2 right">
<img src="{{ S_AVATAR_PATH }}" height="75px" alt="Avatar" class="comment-avatar valign-top img-circle cream-thick-border" />
</div>
<div class="col-lg-1 col-md-1 col-sm-1" style="width: 2%;"></div>
<div class="comment-rag col-lg-9 col-md-9 col-sm-9 left" style="padding: 0;">
<div class="comment-content">
<span class="small">
Posted by <strong>Username</strong>
<span class="grey">
/ 30 likes
• 30 dislikes
/ 30 days ago
</span>
</span>
<span class="pipe-hide"> | </span>
<span class="comment-options">
<span class="comment-option glyphicon glyphicon-thumbs-up"></span>
<span class="comment-option glyphicon glyphicon-thumbs-down"></span>
<span class="comment-option glyphicon glyphicon-minus-sign"></span>
</span>
<br />
<span class="break">Lorem ipsum dolor sit amet, fastidii dissentiunt et pro, pri eu rebum omnes nusquam, has et iudico facilis forensibus. In wisi facete deterruisset has. Eirmod option officiis vis ad, mea no dicta ornatus scriptorem, vim te primis option. Stet invenire vis te. Per at omnis commodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum. Ut probo liberavisse pri, graeci saperecommodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum.</span>
</div>
</div>
</div>
And this is the little .break class:
.break {
word-wrap: break-word !important;
word-break: break-all !important;
text-wrap: suppress !important;
}
Why isn't Bootstrap taking care of breaking my text correctly? What's wrong?
What is the CSS of the comment-content?
When I try it with a fix-width of the comment-content class, everything work great.
Here is an example.