Card clickable with Bootstrap 4

Asked

Viewed 687 times

0

I would like to add a link on the card to redirect to another page. I’d like to make the card all clickable and I’d like to change the bottom of it and it got a little big with me?

Could someone help me?

.loginUser{
	position:relative;
	left: 50%;
  margin-left:-154px;
	margin-right: 50%;
	width: 308px;
	text-align: center;
}



.fa-pb_icon-gradient:before {
    background: #2980b9;
    background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




element.style {
}
.prodct1 {
}
.p-3 {
    padding: 1rem !important;
}
.border {
    border: 1px solid #dee2e6 !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.text-center {
    text-align: center !important;
}
html, body {
    margin: 0;
    font-size: 100%;
    font-family: 'Niramit', sans-serif;
    background: #fff;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

    </style>
</head>

<body>
<!------ Include the above in your HEAD tag ---------->
  
<div class="container">
  <div class="row">
    <div class="col-sm">
     <div class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </div>
    </div>
    <div class="col-sm">
     <div class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </div>
    </div>
    
  </div>
</div>
 
  </html>  
  
  
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

twitter-bootstrap

  • Decrease in what direction?

  • decrease the card size

  • "Decrease" is wide mt. Could be width, height, text size, icon, internal spacing etc etc.

  • it’s time, I tried to set your example but it didn’t work.

  • My example did not deal with the size, only the issue of being clickable. In addition to CSS fixes.

2 answers

1

It’s basically just putting the link out of the card.

<a href="https://google.com">
  <div class="card bg-transparent text-white text-center p-3">
    ...
  </div>
</a>

And in CSS it would have something like a:hover .card { background-color: red !important; }

The complete code will look like this. Note that I needed to use !important for the color pick up the card.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .loginUser {
        position: relative;
        left: 50%;
        margin-left: -154px;
        margin-right: 50%;
        width: 308px;
        text-align: center;
    }



    .fa-pb_icon-gradient:before {
        background: #2980b9;
        background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }




    element.style {}

    .prodct1 {}

    .p-3 {
        padding: 1rem !important;
    }

    .border {
        border: 1px solid #dee2e6 !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    user agent stylesheet div {
        display: block;
    }

    .text-center {
        text-align: center !important;
    }

    html,
    body {
        margin: 0;
        font-size: 100%;
        font-family: 'Niramit', sans-serif;
        background: #fff;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
        background-color: #fff;
    }

    :root {
        --blue: #007bff;
        --indigo: #6610f2;
        --purple: #6f42c1;
        --pink: #e83e8c;
        --red: #dc3545;
        --orange: #fd7e14;
        --yellow: #ffc107;
        --green: #28a745;
        --teal: #20c997;
        --cyan: #17a2b8;
        --white: #fff;
        --gray: #6c757d;
        --gray-dark: #343a40;
        --primary: #007bff;
        --secondary: #6c757d;
        --success: #28a745;
        --info: #17a2b8;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #343a40;
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;
        --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -ms-overflow-style: scrollbar;
        -webkit-tap-highlight-color: transparent;
    }

    user agent stylesheet html {
        color: -internal-root-color;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    a:hover .card {
        background-color: red !important;
    }
</style>
</head>

<body>



    <div class="container">
        <div class="row">
            <div class="col-sm">
                <a href="https://google.com">
                    <div class="card bg-transparent text-white text-center p-3">
                        <div class="log">
                            <section class="loginUser">
                                <!--avatar - icon font awesome-->
                                <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                                <!--Call to action-->
                                <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                            </section>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm">
<a href="https://google.com">
                <div class="card bg-transparent text-white text-center p-3">
                    <div class="log">
                        <section class="loginUser">
                            <!--avatar - icon font awesome-->
                            <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                            <!--Call to action-->
                            <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                        </section>
                    </div>
                </div>
</a>
            </div>
        </div>

        <div class="row">
            <div class="col-sm">
                <a href="https://google.com">
                    <div class="card bg-transparent text-white text-center p-3">
                        <div class="log">
                            <section class="loginUser">
                                <!--avatar - icon font awesome-->
                                <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                                <!--Call to action-->
                                <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                            </section>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm">
<a href="https://google.com">
                <div class="card bg-transparent text-white text-center p-3">
                    <div class="log">
                        <section class="loginUser">
                            <!--avatar - icon font awesome-->
                            <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                            <!--Call to action-->
                            <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                        </section>
                    </div>
                </div>
</a>
            </div>
        </div>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

  • Hello yours worked well, but when I put link on the two cards, the bottom also took the link from the card

  • @Ludi edited the code and put the link in the two cards... apparently it is working normal both the first and the second... Could you explain to me better what this "bottom" would be? Here are all within the normal, the link is only on the card

0

Just change the card tag to <a> and place an attribute href with the URL to where you want it to go when clicked.

Now, you don’t need those styles you put in the class .loginUser which, with all due respect, seems to be gambiarra:

/*.loginUser{
	position:relative;
	left: 50%;
  margin-left:-154px;
	margin-right: 50%;
	width: 308px;
	text-align: center;
  background: red;
}*/



.fa-pb_icon-gradient:before {
    background: #2980b9;
    background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




element.style {
}
.prodct1 {
}
.p-3 {
    padding: 1rem !important;
}
.border {
    border: 1px solid #dee2e6 !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.text-center {
    text-align: center !important;
}
html, body {
    margin: 0;
    font-size: 100%;
    font-family: 'Niramit', sans-serif;
    background: #fff;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

    </style>
</head>

<body>
<!------ Include the above in your HEAD tag ---------->
  
<div class="container">
  <div class="row">
    <div class="col-sm">
     <a href="URL" class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </a>
    </div>
    <div class="col-sm">
     <a href="URL" class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </a>
    </div>
    
  </div>
</div>
 
  </html>  
  
  
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.