Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS Make same line of the buttons

Valakik

Valakik

New Coder
Hello
I don't know how I should make the design that the buttons will be equal line and not that one button will be below than other buttons.
My code is this:
HTML: 
<div class="row three__blocks text-center">
        <div class="container">
                <div class="card-deck mb-3 text-center">
            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-chart-bar fa-5x" style="color: #e0d292;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Statistics</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="card-text smaller"><small>With our online dashboard and family app you'll be able to see how your children uses devices, apps, and the web. (coming soon)</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-columns fa-5x" style="color: #4980bf;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Dashboard</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="card-text smaller"><small>You can manage via online dashboard your children's activity, time limit, add new parent member and children and much more with few clicks. (coming soon)</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-lock fa-5x" style="color: #ba4914;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Limit</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="card-text smaller"><small>You can limit how much can be used the devices by your children and which applications they can use in specific time or block them completely.</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-satellite-dish fa-5x" style="color: #626475;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Offline settings</h4>
                    </div>
                    <div class="card-body d-flex flex-column flex-md-row">
                        <p class="card-text smaller"><small>If there is no internet connection then you as parent can give a master pin code to manage your children's activities. Later you can connect to your account the device when there is internet.</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-shield-alt fa-5x" style="color: #27ba14;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Security</h4>
                    </div>
                    <div class="card-body d-flex flex-column flex-md-row">
                        <p class="card-text smaller"><small>Make your children's online session secured so they will not going to dangerous places and talking with dangerous people. (coming soon)</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-3 mb-3">
                <div class="card mb-4 box-shadow">
                    <i class="card-img-top fas fa-coins fa-5x" style="color: #e0d292;"></i>
                    <div class="card-header">
                        <h4 class="card-title">Free</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="card-text smaller"><small>This service of IDU Network will staying free much as possible to give opportunity for everybody to use full potential of all the functions.</small></p>
                    </div>
                    <div class="card-footer mt-auto">
                        <a class="btn btn-info btn-lg" href="index.html#" role="button">read more</a>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

I did attach the screenshot:
ScreenShot_20210210235154.png

I use the bootstrap 3.4.1 version. Is there a solution that the page will recognize in that 6 cards, which has the most length and then put the all of the buttons similar level as the button which has most the text?
As you can see "offline settings" button is more below than the other buttons because above message is longer.
I did read d-flex method which I tried to use but didn't work for me.
Thank you in advance the answers.
 
Sort by date Sort by votes
HTML: 
<ul id="parent">

    <li>Box #1</li>

    <li>Box #2</li>

    <li>Box #3</li>

    <li>Box #4</li>

    <li>Box #5</li>

    <li>Box #6</li>

</ul>
But just change the box elements to it.
 
Upvote 0 Downvote
Try this
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1; }
.item2 { grid-area: 2; }
.item3 { grid-area: 3; }
.item4 { grid-area: 4; }
.item5 { grid-area: 5; }
.item6 { grid-area: 6; }

.grid-container {
  display: grid;
  grid-template-areas:
    '1 1 1 1'
    '1 1 1 1'
    '1 1 1 1';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 50px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>Grid:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>

</div>

</body>
</html>
 
Upvote 0 Downvote
Sago said:
Try this
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1; }
.item2 { grid-area: 2; }
.item3 { grid-area: 3; }
.item4 { grid-area: 4; }
.item5 { grid-area: 5; }
.item6 { grid-area: 6; }

.grid-container {
  display: grid;
  grid-template-areas:
    '1 1 1 1'
    '1 1 1 1'
    '1 1 1 1';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 50px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>Grid:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>

</div>

</body>
</html>
Click to expand...
Totally unnecessary if you have a consistent grid

Also, it's flawed, you difinated 6 grid-area at the top and then used only the first one at the bottom.
But in the divs you have used 1 and 2

@Valakik
i have made a similar listing for my services: https://rollenspiel.monster/
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom