I'm trying to get a small profile image to display on the left with a name and title on the right using bootstrap 4. Sometimes the titles are very long and can go onto the next line. My problem is the next line is the end of the image instead of the middle of the image. I've looked at a few examples online that work in the fiddler but when I copy and paste the code into my code it breaks.
Can anyone show me what I've done wrong. I would like to learn more of the theory so I don't have this problem.
I've converted this from php so there might be some " or ' left over that shouldn't be there and row isn't ended because there is more code for a similar second side.
Thanks
<div class="row">
<div class="cast-list col-6">
<h2 class="text-center">Cast</h2>;
<div class="row">;
<div class="col-6">;
<div>
<img class="img-responsive profilepic" src="//image.tmdb.org/t/p/w45">;
<span class="people profiletext"> . $person->name . </span>;
<span class="people profiletext"> . $person->character . </span>
</div>
</div>;
</div>;
</div>
.people{
padding-left: 10px;
}
.profilepic{
}
Hope the person name and character will comes in a single row. If yes then use the below code:
<div class="d-flex align-items-center">
<img class="img-responsive profilepic" src="//image.tmdb.org/t/p/w45">;
<span class="people profiletext"> . $person->name . </span>;
<span class="people profiletext"> . $person->character . </span>
</div>
Do not fix the container size. Since the values wont be same at all the time.
If it comes with longer data. then the container will be expanded aswell. To avoid that, You can fix it to static width and you have to use ellipsis
CSS:
.yourclass{
text-overflow: ellipsis;
white-space:no-wrap;
}
Related
I just create footer with 4 columns, and last column contain two rows of div. I want that last column to be left aligned so i use justify-content-start for the first row, and it works. But when i try it to second row, which is search bar with button, the justify-content-start doesn't work.
So I tried with flex-row, but it doesn't work either. Here is my web view right now.
I want that search bar and button are parallel with the visitor counter above. Any suggestions for me to fix this things up?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Pengunjung :</h5>
<?php
$date = date("Y-m-d");
$pengunjunghariini = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
$dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row();
$totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
$bataswaktu = time() - 300;
$pengunjungonline = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online`
?>
<h5 class="card-title">
<?php echo $totalpengunjung ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
The problem might be that your container of that search bar might already have 100% width of its parent, so that any horizontal alignment wont be possible, since it has no space to move to.
This is a very common issue, and to quickly find out what is going on, you can use some CSS debugging techniques, as weird as it sounds.
The best example of this layout debugging technique is to set a border to your div that you need to be aligned somehow (or on its children).
.container {
border: 1px solid lime
outline: 1px solid lime
}
Note: outline might be better in some cases, since it is not increasing width/height of your element
If your container is really as wide as its parent, try width: fit-content on it, so it shrinks and leaves some space to be aligned to. Hope this helps, and to the future as well :-)
Lately, I've run into a problem when trying to get my web aps to work with small devices. Even then, this doesn't seem to always be an issue, it will depend upon the orientation of the phone. What I'm seeing is say I have a Bootstrap 4 ROW with a col-3 col-6 col-3 setup. The center col has more height and includes images where fade in and out of opacity, so the height is constant. When BS does its thing for smaller displays, the first col-3 breaks properly, leaving space for the col-6. The problem is the col-6 seems to break at the col-3 height and I get over lapping. When using the dev tools, I can see this is the case but I dont want to set a hard height because that makes the spacing go weird and defeats the whole BS purpose. Here are some examples:
<div class="row" style="margin: 0vh 5vw;">
<div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
<div>
<i class="fa fa-eye features-icon"></i>
<h2 style="color: white; font-size: 3vmin">Something</h2>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center wow" style="height: 53vh;">
<img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh;
display:block; position:absolute; opacity: 1;">
<img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top:
3vh; display:block;position:absolute; opacity: 0;">
</div>
<div class="col-md-3 col-sm-12 text-center wow fadeInRight">
<div>
<i class="fa fa-database features-icon"></i>
<h2 style="color: white; font-size: 3vmin">More blah blah</h2>
</div>
</div>
</div>
This image shows where col is over lapping (blue icon)
BTW, I've set the center col height because without it, I get no height to that col. I've tried manipulating it, but it seems that whatever I do, it will fix it for one layout orientation and mess up the others. I must be missing something simple in BS. Thanks in advance for your help.
That row has an inline style defining a margin, maybe the view units are causing the problem. Try changing that around to % or px to see how it behaves or remove that margin all together and use bootstrap's margin utilities. Other thing I can think of would be to try and wrap the overlapping elements in two different .container-fluid
So, I ended up doing what I consider a cheat using jQuery. I gave the col div an id of #mcsCol and put this in my $(document).ready(function)
$("#mcsCol").css({ "height": $("#img1").css("height") });
So essentially, it will check the height of the image and set the col to the same height. If you have a more native solution, I'd love to see it.
I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is large, it breaks to a second line , making the thumbnail become disorganized .
here the what issue
https://s17.postimg.org/v4116i54f/pic.png
anyone know how to fix this?
<div class="col-lg-3 col-sm-6 videoitem">
<div class="b-video">
<div class="v-img">
<img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt="">
<div class="time">3:50</div>
</div>
<div class="v-desc">
<a href=".html" >title</a>
</div>
<div class="v-views">
27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
</div>
</div>
</div>
You have two possibilities here:
Either force one-line titles with height, overflow and text-overflow
Or clear the floats after every 4 items using some kind of clearfix
If you are not much concerned about browser support you can also try Bootstrap 4 which implements grid using flexbox
You can add a min-height for the title or you can use to -webkit-line-clamp: 2;like this answer https://stackoverflow.com/a/13924997/7565713
I recognize that this question has been asked a hundred times. However, the answers that I see do not work in my situation. This makes me believe there is something additional in my content.
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
</div>
I want the remove [x] in the second column to be vertically centered in relation to the first column. Right now, the remove [x] is vertically centered across the top. I thought I could vertically center the content by doing the following:
<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
Unfortunately, that did not work. I'm not sure what I'm doing wrong.
First, I'd recommend you to add an additional class to the columns you want to work with. In your bare-bones example, it won't make a difference, but once you start adding more elements, you'll find out the advantages of managing elements by their re-usable class.
So, first step, a tiny change in your HTML. Not really needed since you could easily target (for example) .col-xs-6 , but this is a general approach (as we're at it, I'd add a class to that row and remove that inline style)
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<span class="pull-right remove">
remove
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
</div>
Now that we can SAFELY target Bootsrap element without affecting the flow of the same re-usable classes in further uses, we simply give a vertical-align to them, like this:
.midvert {
display:inline-block;
vertical-align:middle
}
See how the vertical align is added to the CONTAINING BLOCK ELEMENT, not the element you want to align itself. But of course, that won't do anything at all, because our .remove element needs some sort of defined height, so we add the following:
.remove {
line-height: 4;
}
While the reasons for single numbers is open to discussion (you could use px, rem, em, %, etc), and I have seen that most people here use the px approach, I prefer to use single numbers. You can see the rationale here Prefer unitless numbers for line-height values , but again, use as you please. You'll notice that a number between 4 and 4.5 is the perfect fit, just resize window and see it by yourself.
I've forked a Bootply to demonstrate the issue
You could achieve this by adding a line-height to your "remove" link.
For example if you add this class to your link:
.remove {
line-height: 40px;
vertical-align: middle;
}
It will be aligned.
Bootply demo
I have created Fiddle for you, Hopefully this work for you.
Please observe css tab where i have added display:table-cell; for other col-sm-6 css class as well.
I am trying to get rid of unwanted space in a WordPress page. Here is the link to the page: http://lectorbookclub.com/current-conversations/. I'm trying to use CSS to fix it because I only have access to editing the CSS and HTML.
I used Firebug to gather this code:
<div id="content" role="main">
<article id="post-12581" class="post-12581 post type-post status-publish format- standard hentry category-fall-2013 category-uncategorized tag-end-of-year-post clear-fix">
<div class="featured-image">
<a href="http://lectorbookclub.com/2014/05/01/eng-202b-summary-post/" title="Permalink to Eng 202B Summary Post" rel="bookmark">
<img src="http://s0.wp.com/wp-content/themes/pub/oxygen/images/archive-thumbnail-placeholder.gif?m=1335191815g" alt="" class="attachment-archive-thumbnail" scale="0"/>
</a>
</div>
<header class="entry-header">
<h1 class="entry-title">
<div class="entry-meta">
<span class="entry-date">
<span class="byline">
<span class="comments-link">
<span class="edit-link">
</div>
</header>
<div class="entry-summary clear-fix">
Read Article →
You have a few options depending on how you want to go about this.
My first suggestion is simple just based off of what you have shared. (that said this does not mean this is the only way, or the best way or the clean way)
You may want to adjust your CSS to move the individual entries a few pixels from the right by adding a right margin.
.entry-summary {
margin-right: 45px;
}
Or you may want to add a left margin to .entry-header
.entry-header {
margin-left: 15px;
}
There are various other options as well. Hope this helps.
(try to be more concise and direct in the future. ask your question with all needed details for others to understand so that you may receive an answer more quickly and that others may feel more motivated to help!)
In your CSS stylesheet:
#page {max-width: 960px; }
Substitute 960px for whatever size you want it to be.
Okay, I realized it had to do with the article tag (which wraps around the date and the entries). I played around with the width of the article tag in CSS and this seemed to be the answer. Thank you all so much for looking at this problem!
I would consider making the text in entry-header align right.
header.entry-header { text-align: right; }
I don't know how else header.entry-header is used in your theme, but on the page you provided, that would probably produce the alignment you are looking for.