My site is a bootstrap 5, Jekyll-built site using a template I created. I have a div that houses post title, nd a few components from a %include% file.
`
<div class="col-md-12 col-sm-12">
<div class="p-3 border rounded-1 bg-light">
<h1 class="display-5 mb-1 lh-1">{{ page.title }}</h1>
<div class="mb-4">
<p class="mb-0 text-muted fs-6 float-start">andresanz.com / blog / {% include meta.html %}</p>
</div>
</div>
</div>
</div>`
When I look at the site via phone/inspector in Chrome, the text blows out the bottom of the container:. I've tested and the same happens with an IMG file as well:.
Thanks for looking # https://andresanz.com/blog/ to see what I'm talking about.
I've tried changing alignment and push/pulls to no avail. I was expecting to have the bottom of the bordered-div pushed downward to contain the text. I looked at Bootstrap flex layout - div in main section not expanding to fill its parent and it didn't help...
Related
I've been building the responsive card collection with Bootstrap 5 and vue 3. With the container and the row classes, I can make the cards align to each at the same level. However, to make the timestamp (card-footer) attached to the bottom, I also use h-100 within the card classes. The timestamp is rendered as expected, but there's a gap between each row if the content changes, illustrated below.
I want to make the card align vertically close to have the same gap between the cards.
Is there any way for doing vertical alignment with Bootstrap?
Here is part of the code for now (with vue3):
<div class="container">
<div class="row justify-content-center">
<div class="card h-100 shadow-sm mt-3 mx-1" v-for="(newsPiece, index) in newsCollection" :key="index">
<!-- image can toggle description -->
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<!-- title -->
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<!-- toggle content from image -->
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<!-- {{ newsPiece.description }} -->
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>
As explained here, you're looking for a "Masonry" layout. The recommended method for Bootstrap 5 is to use the Masonry JS plugin.
I'm coding a website using bootstrap 4 and for some reason that I cant figure out, there is some space between my two wrapper div's in the following code.
<!-- News! Ad with "read more" modal popup -->
<div id="news-bar" class="container-fluid bg-white my-0">
<h2>News</h2>
<p>Short Description</p>
<p>more</p>
</div>
<!-- About us / Register for consultation -->
<div id="about-jumbotron" class="jumbotron jumbotron-fluid bg-dark text-white margin my-0">
<div class="container-fluid">
<h1>Big Heading</h1>
<h2>Smaller heading</h2>
<p>Description text</p>
</div>
</div>
Here is an imgur link with a photo of my browser output. Sand brown line is the background-color set for my webpage.
So far I've tried adding my-0 and py-0 to both #about-jumbotron and #news-bar with no success. Also, if i click on the empty space and select inspect element in my web browser it refers to the body tag. As an alternative solution I can set the background color to be the same as one of the div elements but I do want to first try to find a proper solution.
I solved it. The problem was that the the h1 and h2 elements had their own margins pushing the bottom downwards. it was fixed by setting my-0
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
I'm trying to create a header in bootstrap 4 like this:
I'm facing several problems with this approach. Firstly the logo is not properly centered to the middle. I've tried several methods to avoid this including align=middle, margin on the bottom (which adds more space on the bottom than the space that's already on top-side) and the grid-system with col-1 and col-9. The last one creates to much space between the logo and the heading.
The image includes the version which contains the image in the HTML h1 element. Here is the source to create the logo:
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text
<small class="text-white-50">
The new way of doing text-research</small></h1>
Am I doing something wrong? Bootstrap examples with an included logo are very rare. Maybe it has a reason...
Additional information
The small text shouldn't be centered.
I want to achieve this with bootstrap utilities only.
Use a flexbox for all items. Don't put the image and text inside the h1.
div {
display: flex;
align-items: center/* vertical alignment */
}
small {
font-size: 1rem;
}
<div>
<img src="https://via.placeholder.com/64x64" width=64 height=64 />
<h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>
</div>
Since there is no html posted i am going to assume you have bootsrap basics in place:
Assuming you have something like this
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header">
<span>
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64/>
some text
<small>The new way of doing text-research</small>
</h1>
</span>
</div>
</div>
</div>
EDIT: REMOVED CUSTOM CSS
PLease note that having the html in this way is not recommended.
But if you are insistent that you not use any custom css this solution should solve the problem.
I hope this is what you are looking for.
Check updated code pen https://codepen.io/Jsilvestri/pen/vzzJRy
I'm trying to achieve masonry for my panels. This is how it looks currently:
I'd like it to fill the gaps whenever it's possible. I've tried using flexbox but it behave like there was 1 row and after adding more panels it just made them smaller. I also tried using column-countproperty but my panels were separated (panel heading from panel body. blue and white) unless there were as many elements in a row as there were columns (i.e. column-count: 4looked good only if number of panels was multiplicity of 4). Here's how my panel code looks:
<div class="container-fluid">
<div class="col-md-3 ng-cloak" ng-repeat="card in vm.cards" style="margin-bottom: 10px;">
<div class="panel panel-info" style="min-width:235px;">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">{{ card.question }}</h4>
<div class="btn-group pull-right">
Manage
</div>
</div>
<div class="panel-body">
{{ card.answer }}
</div>
</div>
</div>
</div>
Here's the exact page in my repository: Github Reposiory
Also here's the working page: http://188.166.160.66/App/Demo
I'd like to achieve this with css, but if it's impossible I'll give js a shot.
If more screenshots are required I can provide them.
#Edit: I want to prevent my site from having horizontal scrolling.