Path: csiph.com!news.mixmin.net!news.unit0.net!news.nask.pl!news.nask.org.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.POSTED!not-for-mail
From: Roman Tyczka <noemail@because.no>
Newsgroups: pl.comp.lang.javascript
Subject: CSS i align dolny
Date: Tue, 5 Feb 2019 10:18:16 +0100
Organization: ATMAN - ATM S.A.
Lines: 139
Sender: romek@tyczka.no.found
Message-ID: <hdgljl4134p6.dlg@tyczka.com>
NNTP-Posting-Host: ip-94-75-90-137.wave.com.pl
Mime-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit
X-Trace: node2.news.atman.pl 1549358296 6421 94.75.90.137 (5 Feb 2019 09:18:16 GMT)
X-Complaints-To: usenet@atman.pl
NNTP-Posting-Date: Tue, 5 Feb 2019 09:18:16 +0000 (UTC)
User-Agent: 40tude_Dialog/2.0.15.84
Xref: csiph.com pl.comp.lang.javascript:3587


CSS to najbardziej popieprzona technologia z jaką miałem do czynienia,
mnogość opcji, sposób dziedziczenia i działania warunkowego jest tak
pokręcony, że męczy jak diabli. A robię prymitywne rzeczy :/

Ok, jest prosta strona z czterema kolumnami, w kolumnach tekst w różnej
ilości oraz na dole button, tak to wygląda:

http://snap.ashampoo.com/uploads/2019-02-05/HjNXnnhhmRuAkXb0iwGg2N6GgGHc9FGGpu05cGEOyYPDRQDZiKADY7K0EsceyIli.png

Jak sprawić by button był przyklejony do dolnej krawędzi w każdej z kolumn,
a nie siedział tuż pod tekstem?

Oparte o Bootstrap 4.

Kod HTML:

    <div class="container justify-content-center">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-3">
                <div class="pakiet-box pakiet-a">
                    <h3 class="text-center">pakiet<br>A</h3>
                    <p>Paragraph</p>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul>
                    <div class="btn-order"><button class="btn btn-primary
d-flex btn-order" type="button">Button</button></div>
                </div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="pakiet-box pakiet-b">
                    <h3 class="text-center">pakiet<br>B</h3>
                    <p>Paragraph</p>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="pakiet-box pakiet-c">
                    <h3 class="text-center">pakiet<br>C</h3>
                    <p>Paragraph</p>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="pakiet-box pakiet-d">
                    <h3 class="text-center">pakiet<br>D</h3>
                    <p>Paragraph</p>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
            </div>
        </div>
    </div>

dodatkowy kod CSS spoza BS:

body {
  margin: 0;
  color: #273293;
  background-color: #e1fede;
}

.pakiet-box {
  background-color: rgb(217,252,205);
  border-color: black;
  border-width: 5px;
  border-style: groove;
  border-width: thin;
  height: 100%;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.pakiet-a {
  background-color: rgb(216,247,206);
}

.pakiet-b {
  background-color: rgb(212,239,251);
}

.pakiet-c {
  background-color: rgb(255,254,229);
}

.pakiet-d {
  background-color: #ebebeb;
}

.container {
  background-color: rgb(225,254,222);
}

.col-sm-12 {
  padding-left: 5px;
  padding-right: 5px;
}

.btn-order {
  margin-left: auto;
  margin-right: auto;
}

p.desc {
  margin: 20px auto;
  padding: 10px 50px;
  max-width: 550px;
}


-- 
pozdrawiam
Roman Tyczka