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

Issues with the alignment of columns using Bootstrap framework

Determine the dimensions of a div element in IE after adjusting its height to auto

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

What is the best way to ensure that a div appears below, rather than alongside, another one

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

Switch out the content within a div upon selection

The lower text box on the page being covered by the virtual keyboard on IOS

Maintaining the position of the screen as you type in information that is located outside of the container

Persistent button positioned at the bottom of the page, remaining visible even when scrolling to the very end of the content

Incorporate text onto an image using Semantic UI

Chrome and Firefox browsers are not supporting HTML simple anchor links

Display flex causing Mui LinearProgress Bar to disappear

Animation failing to be queued properly

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

Tips for implementing an image as a background in AngularJS

Using CSS to conceal an element when a different element is also invisible

Issues arise when implementing ReactJS transitions for progress bars

I'm having trouble getting my accordion menu to work properly. Whenever I click on the question title, the answer doesn't seem to show up or collapse. What could be causing this issue?

I am attempting to make the fade in and out effect function properly in my slideshow

Guide on exporting Excel data using Angular and TypeScript