Position card without changing heading

bootstrap 4 card examples
bootstrap card height
bootstrap card examples
bootstrap card image left
bootstrap 3 cards
bootstrap cards w3schools
bootstrap cards codepen
html css card layout

I am making a contact support page with Bootstrap 3. I have positioned a card on top of the header image, and set a padding on 140px on the card:

.card-section { 
        position: relative; 
        bottom: 140px; 
    }

See a demosite here.

The heading: "3 hurtige tips før du ringer til os" is now getting pushed 140px down and I would like that heading is going just below where the card is ending.

Does anybody have an idea how I can solve that?

The code is pretty long, so I only posted the relevant code. Please look the demosite for the whole page.

.mk-page-header { 
        background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(http://koed.dk/Static/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
        no-repeat; 
        position: relative; 
        background-size: cover; 
    }
    
    .page-caption { 
        padding-top: 170px; 
        padding-bottom: 174px; 
    }
    .page-title { 
        font-size: 46px; 
        line-height: 1; 
        color: #fff; 
        font-weight: 600; 
        text-align: center; 
    }
    
    .card-section { 
        position: relative; bottom: 140px; 
    }
    .card-block { 
        padding: 40px 80px 10px 80px;
        box-shadow: 20px 20px 50px grey;
    }
    .section-title { 
        margin-bottom: 60px;
    }
<div class="mk-page-header">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-caption">
                    <h1 class="page-title">KONTAKT VORES SUPPORT</h1>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Card Section -->
<div class="card-section">
    <div class="container">
        <div class="card-block" style="background-color: white;">
            <div class="contact-icon row">
                <div class="section-title">
                    <h2>HAR DU SPØRGSMÅL?</h2>
                    <p>KOED har siden starten i 1993 beskæftiget sig udelukkende med BMW, og denne omfattende erfaring og viden vil vi gerne dele med dig. Vores store viden om BMW gør os i stand til at give dig svar på næsten enhver forespørgsel om mærket, hvad enten det handler om reservedele, tilbehør, hjælp til specialopgaver, guides til reparationer og meget mere.</p>
                </div>
                <div class="col-sm-12">
                    <div class="contact-icon row">
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block" src="https://koed.dk/Static/Cms/6dfe32ba-7cff-443d-ab73-016dd2f6dca7.jpg"></img>
                            <h3 style="text-align:center;">Ring til os</h3>
                        </div>
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block"  src="https://koed.dk/Static/Cms/57e5b8a2-871d-487f-90e4-ae8b8d170ca2.jpg"></img>
                            <h3 style="text-align:center;">Skriv til os</h3>
                        </div>
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block"  src="https://koed.dk/Static/Cms/3caa853e-7da3-4e1f-9aa2-a04ee71901c9.jpg"></img>
                            <h3 style="text-align:center;">Facebook</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The easiest solution is to add also margin-bottom: -140px; to the .card-section where you already have bottom: 140px;.

But this is not the only solution.

Cards · Bootstrap, Float · Image replacement · Position · Screenreaders · Sizing · Spacing · Text · Vertical If you're familiar with Bootstrap 3, cards replace our old panels, wells, and Cards have no fixed width to start, so they'll naturally fill the full width of its Some quick example text to build on the card title and make up the bulk of the  Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.

The reason the whitespace is appearing is due to the position being set to relative on the card-section. Relative elements take up their space required in the normal document flow and then adjust their position.

To solve this, you should wrap the card-section in another div with a fixed height.

As for the flow of the document, the next row element is only concerned with the wrapper div and not the actual relatively positioned card-section.

.card-sec-wrap{
  height: 300px; // Adjust according to your need.
}

Primary Ground Study Manual, In synchronizing the card D with the heading of the magnetic compass, the knob J is However, the rotor axis cannot change its position in azimuth without  This strategy provides a level of encapsulation for the card so that the card's Default property can change without changing the internal formulas of the card. By default, DefaultValue and Required properties are taken from the data source's metadata based on the DataField property.

get rid of:

.card-section { 
    position: relative; 
    bottom: 140px; 
}

Bootstrap Card Component: a Complete Introduction, A Bootstrap card component can optionally have a header and footer by adding So let's change our simple example by adding a tabbed navigation will take care of the rest without having to use a JavaScript/jQuery plugin. Bootstrap cards component provide a flexible and extensible container for displaying content. Bootstrap cards are delivered with a bunch of variants and options. A Bootstrap card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent

Writing and Speaking in the Technology Professions: A Practical Guide, Type (Seconds) 1 Size 98.21 32.80 2 Size/Position 126.00 50.51 2 Size/Case 121.80 The card set with the smallest relative difference in heading size (5.9%) took the hypothesis that relative, not absolute, differences in heading sizes provide the While changing size alone in a heading appears adequate to signal the  Not knowing what any of those variables are makes it almost impossible to provide a definitive answer for you. Graphic Objects in a Header or Footer are treated not much differently than if positioned elsewhere. Here are some general pointers The image must be either In Line with Text or ' Floating ' [having some form of Text Wrapping applied to it].

Positioning, I'm sure you had fun playing with basic positioning; while it is not a method If you save and refresh at this stage, you won't see a change in the result at all. This is because the positioned heading no longer appears in the  After you insert an image in Microsoft Word, reposition it in your document.You may want to overlap photos or set a specific text-wrapping pattern. An imported image in Word is assigned square text-wrapping by default, but there are other options you can use to get things looking just the way you want.

Flying Training: Air Navigation, July 1, 1973, Deviation changes with heading as shown in figure 4-7. compass (in this case, the south pole), but on this heading does not change its direction. level flight, the compass card is balanced on its pivot in approximately a horizontal position  Changing the header width to 960px; will create the proper size, but it still needs to be positioned correctly. To do this, we add a property of margin: 0px auto; to the header and then create a new class .header-cont { width:100%; position:fixed; top:0px; }. This then wraps the header division to apply the two classes to it.

Comments
  • I am not quite sure if this is a bad solution, but it is working. So I used this one.
  • Thank you for the suggestion. I will try this later on, when I have to optimize my code
  • Thank you for your suggestion. But how can I position the card section then :-)