How can I float a square to the right in Bootstrap with a col-md-4 size but with a height restricted to only 200 px

Question

How can I float a square to the right in Bootstrap with a col-md-4 size but with a height restricted to only 200 px

Looking to add a small square on the page for users to search and purchase courses directly. The square should be 4 columns wide, follow Bootstrap4 grid template, and be around 200-300 px in length. It needs to remain visible as the user scrolls down the page.

Take inspiration from this site when implementing this feature:

Codepen:

https://codepen.io/ogonzales/pen/QWjmorP

CODE:

Currently facing an issue where the square remains fixed at the top of the page as the user scrolls.

<main role="main" class="container">
        <div class="row">
          <div class="col-md-8">
            /* Content for main section */
          </div>
          <div class="col-md-4" id="LocalSide">

            <form class="search-form" action="/search/" method="post">
              <input type="hidden" name="csrfmiddlewaretoken"
                value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
              <div class="form-group">
                <input type="search" class="form-control search-course" placeholder="Search for course" name="search_term"
                  required="">
                <input type="hidden" value="3" name="course_id">
              </div>
            </form>

            <h2 class="local-side-heading">In this Section:</h2>
            <nav class="local-nav">
              <ol data-local-nav-list=""></ol>
            </nav>


            <a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
              <span class="label label-success">
                <span class="pcta-label">Get the</span>
                <span class="pcta-hook">full course</span>
                <span class="sr-only">for</span>
                <span class="pcta-badge" aria-hidden="true">Now Only</span>
              </span>
              <span class="pcta-price">$30</span>
            </a>



            <a href="#TOP" class="local-side-jump" data-back-to-top="">↑ Back to top</a>
          </div>
        </div>
      </main>

BONUS:

Would like to incorporate the green arrow found here:

Ideally looking for a solution that works with Bootstrap 4.4.1 since using Bootstrap 3.4.1 displays the labels but not the arrow as needed.

https://i.stack.imgur.com/ej6KA.png

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

I've made some updates to the CSS and HTML files. Take a look and let me know your thoughts.

/* New styles for sticky footer
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
#LocalSide {
  border-style:solid;
  border-width: thin;
  border-color: #E8E8E8;
  padding: 10px;
  border-top: none;
  border-right:none;
}

.box {
    margin-right: 5px;
    padding: 10px   
}

.pcta-hook {
font-size:25px;
    font-weight: 200;
}

span.pcta-label {
font-size:25px;
    font-weight: 200;

}
.pcta-price {
  font-size: 50px;
    font-weight: 600;
}

.green {
background-color: #00FF4D;
    color: white;
    font-size:15px;
    padding: 3px;
    z-index: 99;
    position: relative;
}



.triangle{
   width: 0;
    height: 0;
    border-width: 10px 0 10px 36px;
    border-color: transparent transparent transparent #00FF4D;
    border-style: solid;
    float: right;
    top: 1px;
   position: relative;
    right: 18px;
    z-index: 5;


}

.arrow {


  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

}

.blockHead:after {
  color: #4D81BF;
  border-left: 20px solid;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -19px;
  top: 0;
}
.blockHead {
  background-color: #4D81BF;
  /*width: 150px; */
  display: inline-block;
  position: relative;
}
.blocktext {
  color: white;
  font-weight: bold;
  padding-left: 10px;
  font-family: Arial;
  font-size: 11;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
  padding-top: 70px;
}

.label { border-radius: 0; text-shadow: none; font-size: 11px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important }
.label[class*="span"][class*="arrow"] { min-height: 0 }

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* NAVBAR TOP */

#top-navbar ul li.active>a
a[aria-expanded="true"] {
  color: #1f1f1f;
  background: #12b556;
}

#top-navbar a:visited {
  color: #fff;
}

#top-navbar a:link {
  color: #fff;
}

#top-navbar a.subitem:link {
  color: 

- // SIDEBAR STYLES HERE -

#content {
// Content styling properties here
}

@media (max-width: 768px) {
// Media queries for smaller screens 
}

    <main role="main" class="container">
          <div class="row">
            <div class="col-md-8">
              {% block content %}
              {% endblock content %}
            </div>
            <div class="col-md-4 float-right" id="LocalSide">

              <form class="search-form" action="/search/" method="post">
                <input type="hidden" name="csrfmiddlewaretoken"
                  value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
                <div class="form-group">
                  <input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term"
                    required="">
                  <input type="hidden" value="3" name="course_id">
                </div>
              </form>

              <h2 class="local-side-heading">In this Section:</h2>
              <nav class="local-nav">
                <ol data-local-nav-list=""></ol>
                </nav>
<div class="row">
  <div class="box">
 <span class="pcta-label">Get the </span><br>
  <span class="pcta-hook">full course</span> <br>
      <span class="green" >ABC Team </span> <div class="triangle"> </div>
    </div>
          <div class="box">      

              <span class="pcta-price">$30</span> </div>
  </div>



             <div class="mt-3"> <a href="#TOP" class="local-side-jump " data-back-to-top="">↑ Back to top</a> </div> 
            </div>
          </div>
        </main>


        <footer class="footer">
          <div class="container">
            <span class="text-muted">Footer...</span>
          </div>
        </footer>

      </div>
    </div>

Check out this JS Fiddle link for a live demo:

https://jsfiddle.net/hilalrehan/bu96yh17/1/

Answer 2

I've made some updates to the CSS and HTML files. Take a look and let me know your thoughts.

/* New styles for sticky footer
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
#LocalSide {
  border-style:solid;
  border-width: thin;
  border-color: #E8E8E8;
  padding: 10px;
  border-top: none;
  border-right:none;
}

.box {
    margin-right: 5px;
    padding: 10px   
}

.pcta-hook {
font-size:25px;
    font-weight: 200;
}

span.pcta-label {
font-size:25px;
    font-weight: 200;

}
.pcta-price {
  font-size: 50px;
    font-weight: 600;
}

.green {
background-color: #00FF4D;
    color: white;
    font-size:15px;
    padding: 3px;
    z-index: 99;
    position: relative;
}



.triangle{
   width: 0;
    height: 0;
    border-width: 10px 0 10px 36px;
    border-color: transparent transparent transparent #00FF4D;
    border-style: solid;
    float: right;
    top: 1px;
   position: relative;
    right: 18px;
    z-index: 5;


}

.arrow {


  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

}

.blockHead:after {
  color: #4D81BF;
  border-left: 20px solid;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -19px;
  top: 0;
}
.blockHead {
  background-color: #4D81BF;
  /*width: 150px; */
  display: inline-block;
  position: relative;
}
.blocktext {
  color: white;
  font-weight: bold;
  padding-left: 10px;
  font-family: Arial;
  font-size: 11;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
  padding-top: 70px;
}

.label { border-radius: 0; text-shadow: none; font-size: 11px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important }
.label[class*="span"][class*="arrow"] { min-height: 0 }

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* NAVBAR TOP */

#top-navbar ul li.active>a
a[aria-expanded="true"] {
  color: #1f1f1f;
  background: #12b556;
}

#top-navbar a:visited {
  color: #fff;
}

#top-navbar a:link {
  color: #fff;
}

#top-navbar a.subitem:link {
  color: 

- // SIDEBAR STYLES HERE -

#content {
// Content styling properties here
}

@media (max-width: 768px) {
// Media queries for smaller screens 
}

    <main role="main" class="container">
          <div class="row">
            <div class="col-md-8">
              {% block content %}
              {% endblock content %}
            </div>
            <div class="col-md-4 float-right" id="LocalSide">

              <form class="search-form" action="/search/" method="post">
                <input type="hidden" name="csrfmiddlewaretoken"
                  value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
                <div class="form-group">
                  <input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term"
                    required="">
                  <input type="hidden" value="3" name="course_id">
                </div>
              </form>

              <h2 class="local-side-heading">In this Section:</h2>
              <nav class="local-nav">
                <ol data-local-nav-list=""></ol>
                </nav>
<div class="row">
  <div class="box">
 <span class="pcta-label">Get the </span><br>
  <span class="pcta-hook">full course</span> <br>
      <span class="green" >ABC Team </span> <div class="triangle"> </div>
    </div>
          <div class="box">      

              <span class="pcta-price">$30</span> </div>
  </div>



             <div class="mt-3"> <a href="#TOP" class="local-side-jump " data-back-to-top="">↑ Back to top</a> </div> 
            </div>
          </div>
        </main>


        <footer class="footer">
          <div class="container">
            <span class="text-muted">Footer...</span>
          </div>
        </footer>

      </div>
    </div>

Check out this JS Fiddle link for a live demo:

https://jsfiddle.net/hilalrehan/bu96yh17/1/

How can I float a square to the right in Bootstrap with a col-md-4 size but with a height restricted to only 200 px

Answer №1

Similar questions

The sidebar in Semantic UI does not have a specified height for the form segment

What is the best way to spin a div HTML layer?

This piece of code is causing my browser to lag

Retrieving data from the database and presenting it in HTML div elements

Ways to create a sequential appearance of elements through CSS animations

Tips for transferring a value from a function in ASPX to a CS file

How can I ensure a DIV is shown on every sub-page?

Tips for effectively showcasing the counter outcome amidst the increase and decrease buttons

Discovering the proper method to reach the parent element in jQuery while within the click event

How to access a PHP include using data retrieved from a MySQL database?

Getting the value of an HTML tag returned from an Ajax request

Set the size of the website to remain constant

Having trouble getting a DIV to appear on top of another DIV containing an image

Is there a way to create a blurred background effect while the popup is in use?

Material UI AppBar fixed position that is not part of a grid container

How can we utilize CSS floats to achieve maximum widths?

What is the best method for inserting space between two divs?

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

Automate the process of filling up and activating a bootstrap dropdown upon a click, and clearing it out when it is

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance