Create a Bootstrap HTML5 title adorned with a stylish border and elegant small text, similar to a fieldset but without the inclusion

Currently, I am in the process of developing a bootstrap-based website and facing the challenge of creating a title inside a frame with text attached to the middle of the bottom border while ensuring responsiveness. On smaller devices, the text may need to wrap into multiple rows or even go inside the box.

I have managed to achieve this result partially https://i.sstatic.net/eM4f3.png, but my goal is to replicate it like this https://i.sstatic.net/vnbIF.png.

If anyone has experience implementing this design or can offer assistance, I would greatly appreciate it.

Thank you in advance.

An important requirement is that the design must be completely transparent so it can overlay a background image seamlessly.

This design concept differs from a fieldset as the "legend" appears at the bottom.

csshtmltwitter-bootstrappanelfieldset

Answer №1

Update:

Take a look at this fiddle

Cascading Style Sheets (CSS):

.navbar-brand {
  margin: 0;
  color: #ffffff;
  text-align: center;
  position: relative;
  display: inline-block;
  border-top: 8px solid #ffffff;
  padding: 5px 32px 0px 32px;
  line-height: 1.08333333;
  height: auto;
}
.navbar-brand:before {
  position: absolute;
  content: '';
  left: -8px;
  top: -8px;
  width: 8px;
  bottom: 12px;
  background: #ffffff;
}
.navbar-brand:after {
  position: absolute;
  content: '';
  right: -8px;
  top: -8px;
  width: 8px;
  bottom: 12px;
  background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
  color: #ffffff;
  text-decoration: none;
}
.navbar-header + h3 {
  margin-top: 61px;
}
.navbar-header {
  text-align: center;
}
.small-lines:before {
  position: absolute;
  content: '';
  left: -40px;
  height: 8px;
  bottom: 12px;
  width: 8%;
  background: #ffffff;
}
.small-lines:after {
  position: absolute;
  content: '';
  right: -40px;
  height: 8px;
  bottom: 12px;
  width: 8%;
  background: #ffffff;
}
.small-lines1:before {
  width: 38%;
  background: #009fb6;
}
.small-lines1:after {
  width: 38%;
  background: #009fb6;
}
.navbar-brand a{
    font-size: 48px;
}
.container{
    margin-top: 150px;
}

small {
    line-height: 1.2;
    font-size: 24px;
    letter-spacing: 4.8px;
    display: block;
    position: relative;
}

HyperText Markup Language (HTML):

    <body style="background: black">
    <header class="">  
        <div class="container text-center">
            <div class="navbar-header">
                <h1 class="navbar-brand ">
                    <a href="./">BIG TITLE ONE<br>
                        <small class="small-lines">Here comes small text</small>
                    </a>
                </h1>
            </div>
        </div>
    </header>
    </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

Formulating, Mysql, and the power of data

If I have a form set up like this: <form action="submit2.php"> <input name="name" type="text" /> <input name="age" type="text" /> <input type="submit" /> </ ...

phpmysqlhtmlforms

Why is it important to refuse cookies on websites?

On my website, I have a button for users to decline cookies. If they choose to decline cookies, Google Analytics will not be functional on the site due to the code that has been set up. I have noticed that some other websites offer options in their cookie ...

javascriptjqueryhtmlcookiesweb

What is the best way to center a form element and an image link vertically within a div?

I'm having trouble aligning a search form and an image link within a div. I've attempted using 'display:inline', which did place them on the same line, but not in the way I wanted. I also experimented with adjusting width, float, and pa ...

htmlcssformsimagevertical-alignment

Issue with FiFO on MacOs causes skewed borders to not display correctly

I am currently facing an issue with my webpage and would greatly appreciate some help from the community. My goal is to create a skewed border inside a div, similar to the example on this JSFiddle link: https://jsfiddle.net/kx6f9rsd/ .container { backgro ...

htmlcssmacosfirefox

Steps to revert table data back to its original state after editing in Angular 12 template-driven form

Currently, I have implemented a feature in my web application where users can edit table data by clicking on an edit hyperlink. Once clicked, cancel and submit buttons appear to either discard or save the changes made. The issue I'm facing is related ...

htmlangulartypescriptangular2-template

What causes the footer element to shift outside of the paragraph tag?

When viewing this FIDDLE, you may notice that the <footer> tag appears outside of the <p> tag despite being placed inside it in the HTML. What could be causing this unexpected behavior? HTML Code: <p>Lorem ipsum dolor sit amet, consect ...

html

Guide to adding checkbox IDs and inserting them into a textarea

Hello, my name is Prasath and I am currently learning about AJAX. I am working on a project involving seat layouts and finding it challenging to retrieve both the seat fare and seat number simultaneously. Is there anyone who can assist me in resolving this ...

phphtmlajax

Can images be shown on a different PHP page?

My current project involves annotating images of vials with defects. I have organized these images into folders based on their batch numbers. Each folder is named according to its respective batch number. Once all the images are uploaded, I need to retriev ...

phphtmlcssmysql

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

Filtering posts in Angular with the use of pipes

I've been attempting to use pipes in Angular to filter posts from a table, but I keep running into this error on the console: core.js:12689 Can't bind to 'ngForFilter' since it isn't a known property of 'a'. I believe th ...

htmlangularpipengfor

Create a live notification feature for an HTML5 Django web application to keep users updated in real-time

Currently, I am developing an HTML5 web application using Django and Apache. The main objective of the app is to monitor multiple devices. All client-side logic is written in Angular, while data is fetched from JSON-based REST calls to the backend. Everyt ...

javascriptdjangohtmlangularjsnotifications

Switching iFrame based on dropdown selection

Hello, I'm a beginner in the world of programming and I'm currently experimenting with creating a webpage. However, I've encountered a roadblock and could use some help. My current goal is to change the source of an iFrame to a specific link ...

javascripthtmlbootstrap-4

modify the color of a particular div element in real-time

I am looking to dynamically change the color of the divs based on values from my database. Here is what I have so far: Database: shape id is_success id1 0 id2 1 id3 0 id4 1 <div class="container" style="background: black; widt ...

javascriptphpjqueryhtmlajax

Obtaining Text within <span>Tag</span> with Selenium in C#

I am encountering an issue when trying to retrieve the Subject title of an email from Unread emails using Selenium Webdriver with C#. Below is the HTML code provided : <div class="ae4 UI UJ" gh="tl"> <div class="Cp"> <div> <ta ...

c#selenium-webdriverhtml

Tips for creating a captivating full-screen parallax section on your website

Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...

jquerycsswebfullscreen

Toggle visibility with JQuery's onClick event

I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...

jquerycss

What are the steps to separate Bootstrap 5 from other frameworks?

Is there a way to apply bootstrap-5 styles only to a specific block or page? Can someone provide guidance on isolating bootstrap 5 either for the entire page or in a specific area? ...

htmlsasslessbootstrap-5

"Enhance Your Website Navigation with ASP.NET Menu Image PopOut using

I am using the asp:Menu and the popout image is enabled by default, however I actually like it. The issue is that after modifying the background and foreground of the menu, the popout image arrow blends in with the background. Is there a way to change thes ...

asp.netcssmenu

Using Angular filters, it is possible to eliminate DOM elements without relying on jQuery

As I dive into learning Angular, I am grasping the basics quite well. However, my limited knowledge of JavaScript seems to be hindering my progress. Currently, I am working on a feed that pulls data from a JSON file. Within this data, there is a string co ...

javascriptjqueryhtmlangularjsfilter