Is there a way to showcase the material inside the crimson box on the lower corner of the card using Bootstrap?

image of layout

I've spent countless hours attempting to relocate this row to the bottom of the container, but I'm hitting a dead end. Does anyone have any suggestions on how to achieve this?

Take a look at the code snippet below:

<div class="container min-vh-100 d-flex align-items-center vstack">

        <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1 class="" id="day-of-week">Tuesday</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <h4 class="" id="todays-date">Jan 2nd 2023</h4>
                    </div>
                </div>
                <div class="row d-flex align-items-center g-3">
                    <div class="col-1">
                        <h5><i class="fa-solid fa-location-dot"></i></h5>
                    </div>
                    <div class="col">
                        <h3 class="" id="city-name">City Name</h3>
                    </div>
                </div>
                <div class="row row-cols-1">
                    <div class="col">
                        <h1 class="" id="temperature">51 °F</h1>
                    </div>
                    <div class="col">
                        <h4 class="" id="weather">Sunny</h4>
                    </div>
                </div>
            </div>
        </div>


        <div class="container">
            <form action="" id="searchForm">
                <div class="mx-5">
                    <input type="text" class="form-control" placeholder="search for city" name="query" autofocus>
                </div>
            </form>
        </div>


    </div>

My attempts with justify-self-end and align-self-end on the row haven't yielded any results. It seems like the issue might be related to the .vstack class. I discovered that I could center the container within the viewport using a mix of .d-flex, .align-items-center, and .vstack. If there's a more effective method out there, I'm all ears.

htmlcssbootstrap-5

Answer №1

To achieve this layout, you can utilize the CSS properties display:flex and flex-direction: column on the container of .myCard, along with applying margin-top: auto to the last row. In order to ensure the last-row styles have higher priority, I targeted that specific row using the .myCard class.

.myCard .container {
  min-height: 400px;
  padding-inline: 2em;
  padding-block: 1em;
  width: max-content;
  display: flex;
  flex-direction: column;
}

.myCard .myCard__last-row {
  margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container min-vh-100 d-flex align-items-center vstack">
  <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="" id="day-of-week">Tuesday</h1>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <h4 class="" id="todays-date">Jan 2nd 2023</h4>
        </div>
      </div>
      <div class="row d-flex align-items-center g-3">
        <div class="col-1">
          <h5><i class="fa-solid fa-location-dot"></i></h5>
        </div>
        <div class="col">
          <h3 class="" id="city-name">City Name</h3>
        </div>
      </div>
      <div class="row row-cols-1 myCard__last-row">
        <div class="col">
          <h1 class="" id="temperature">51 °F</h1>
        </div>
        <div class="col">
          <h4 class="" id="weather">Sunny</h4>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <form action="" id="searchForm">
      <div class="mx-5">
        <input type="text" class="form-control" placeholder="search for city" name="query" autofocus>
      </div>
    </form>
  </div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

difficulty loading stylesheet using relative path within django framework

Currently, I have organized my folders in Django as follows: {appname}\templates\ {appname}\templates\assets\css\ When attempting to include something like <link rel="stylesheet" href="assets/css/bootstrap.css" /> in ...

pythonhtmlcssdjangotwitter-bootstrap

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

Strategies for automating the collapse of row tables when resizing reaches the minimum width

I'm in the process of creating a responsive table with just one row. <table style={{'width': '100%'}}> <tr> <th style={{'width': '25%', minWidth: 200, background: 'r ...

htmlhtml-tableresponsive

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

htmlcss

In Rails 5, there are times when the "sometimes" form input field becomes disabled unexpectedly

Having an issue with a form input field that seems to be randomly disabled. It sometimes occurs on a full page reload, like clicking the browser refresh button. I've noticed that I can get it to work by navigating to another link on the page and then ...

javascriptjqueryhtmlruby-on-rails

Can you explain the process of implementing @media queries in SASS?

I am having some trouble understanding the syntax for media queries in SASS. I attempted to use this particular line of code, but it resulted in an error: @media screen (max-width: 1550px) #server-name left: 80% ...

htmlcsssass

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve: When hovering over the image, it fades out. Text should fade in after the image fades out. Text should fade out when the mouse leaves. The original image should fade back in. End with the original image and no text displayed. Iss ...

javascriptjquerycsshtmlimage

Viewing underlined text in iPhone with Bootstrap 5

Recently, I completed a project using Bootstrap version 5.1.3. Upon checking the mobile version on my iPhone XS, I noticed that all anchor tags (<a href="#">Something</a>) have underlined text. To address this issue, I attempted to re ...

htmlcssunderline

In AngularJS, the event handler does not receive the current input value that is being passed

<div ng-repeat="item in groups"> <p hidden><input type="hidden" value="{{item.id_group}}" /></p> <p><textarea>{{item.description}}</textarea></p> <p> <a href="" ng-click="editGrou ...

htmlangularjs

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

javascripthtmlhtml5-videohtml5-audio

Are there any alternative solutions to the onunload event in Chrome, or any other ways to achieve the

After extensive searching for a solution to this issue, including scouring Google Chrome support sites and the Chrome Bug Issues page where the problem has not yet been resolved. Currently, I find myself in a situation where I need to use the onload or onb ...

javascripthtmlgoogle-chrome

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

Every time I insert the SVG logo onto the bootstrap navbar, the formatting mysteriously alters

I'm facing an issue with my svg logo on the navbar - half of it is formatted correctly while the other half is not. Additionally, there is a discrepancy in how it appears on Safari and Chrome. I exported this svg file from Adobe Illustrator and incorp ...

htmlcsssvgbootstrap-4

The appearance of the mock button varies between the development and production environments due to CSS styling

I'm currently using CSS to style a hyperlink in order to give it the appearance of a button. This is for a .NET website. a.pretend { display:inline-block; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-bottom:1px solid #999999; b ...

.netcssinternet-explorer

Is there a way to turn off the scroll bars on a webpage?

Is there a way to remove the scroll bars from the page? Also, how can I disable this specific button? ...

javascriptjquerycssdomscroll

obtain the index of the parent element

Consider this snippet of code <ul class='target'> <li><a>zero</a></li> <li><a>one</a></li> <li><a>two</a></li> <li><a>three</a></l ...

javascriptjqueryhtmlcss

Applying Vue Quill CSS to the initial Quill Editor component exclusively and tips for personalizing the toolbar

I have encountered an odd CSS issue while using the vue-quill package in my project. Each comment has its own quill editor for replying, and I temporarily set the isOpen prop to true for debugging purposes. This results in a quill editor being displayed un ...

javascripthtmlcssvue.jsvuejs3

Is there a way to create a component that will vanish when hovered over using only CSS and HTML?

Despite my attempts, it seems that the desired functionality is not working as demonstrated here. Here is the CSS code I used: div { background-color: yellow; padding: 20px; display: block; } div:hover { display: none; } Is it necessary ...

javascripthtmlcss

Using a responsive menu (mmenu) can lead to an increase in Cumulative Layout

I've implemented mmenu as a responsive menu on my website. Recently, I discovered errors in Google's search console related to high CLS (Cumulative Layout Shift). Upon further investigation, I noticed that when loading my page in "slow" mode for ...

javascripthtmljqueryperformancegoogle-search-console

What is the process for setting up custom HTML tags in Resharper?

I am looking to customize my HTML files by using custom tags to incorporate knockout components [1]: <like-widget params="value: userRating"></like-widget> To enable the tag in VisualStudio's HTML formatting settings, I made the followin ...

htmlresharpercustom-tags