Utilize Bootstrap 4 to seamlessly integrate a small element between two lengthy items in a row, ensuring a gap

I would like to achieve a similar look to this design.

https://i.sstatic.net/p1hq4.png

hr  {
  border: none; 
  color: black; 
  background-color: black; 
  height: 5px;
  margin-top: 10px;
}


  <div class="row code-line">
    <div class="col-5">
      <div class="line-left">
        <hr>
      </div>
    </div>
    <div class="col-1">
      <i class="fa fa-code fa-2x" aria-hidden="true"></i>
    </div>
    <div class="col-5">
     <div class="line-right">
        <hr>
      </div>
    </div>
  </div>

(fa-code is Font-Awesome icon)

Codepen: https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100

I'm unsure how to create symmetry and responsiveness in the design (i.e., resizing long lines should make them smaller). Perhaps utilizing flexbox could be beneficial?

htmlcssfrontendtwitter-bootstrap-4

Answer №1

.hr_line{
  border: 3px solid #eee;
}
.arrow_indicate{
  margin: 10px 0px;
}
.row_right{
  padding-right: 0px!important;
}
.row_left{
  padding-left: 0px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12">
<div class="col-xs-5 row_right">
<hr class="row hr_line"/>
</div>
<div class="col-xs-2">
<div class="row text-center arrow_indicate">
<i class="fa fa-code fa-2x" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-5 row_left">
<hr class="row hr_line"/>
</div>
</div>

Answer №2

If you're looking for a more streamlined markup, try this:

<div class="centered-separator">
   <i class="fa fa-code fa-2x"></i>
 </div>

Simply place it within your desired container and watch it expand seamlessly. Here's a breakdown:

.centered-separator {
  display: flex;
  align-items: center;
  color: #999;
}
.centered-separator > * {
  margin: 0 1rem;
}
.centered-separator::before,
.centered-separator::after {
  height: 2px;
  width: 100%;
  display: block;
  background-color: #999;
  content: '';
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="centered-separator">
    <i class="fa fa-code fa-2x"></i>
</div>

Answer №3

After taking a quick look at your codepen here, I decided to make some changes and use simple flex properties to achieve the desired outcome. The key was to eliminate the <hr /> tag and utilize <div> elements instead.

.row {
  background-color: yellow;
  display: flex;
}

.row > div.hr {
  flex: 1 1 auto;
}

.row > div.hr-icon {
  flex: 0 1 auto;
  padding: 12px;
}

.row > div {
  align-self: center;
}

.hr {
  border: none; /* Remove border for Firefox */
  color: red; /* Line color for other browsers */
  background-color: red; /* Line color for Firefox and Opera */
  height: 5px;
}
<div class="container">
  <div class="row">
    <div class="hr"></div>
    <div class="hr-icon">
      <i class="fa fa-code fa-2x" aria-hidden="true"></i>
    </div>
    <div class="hr"></div>
  </div>
</div>

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

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

jquerycssregexselector

Exploring Angular 4.0: How to Loop through Numerous Input Fields

I am looking to loop through several input fields that are defined in two different ways: <input placeholder="Name" name="name" value="x.y"> <input placeholder="Description" name="description" value"x.z"> <!-- And more fields --> or lik ...

javascripthtmlcssangulartypescript

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

What is the recommended approach for applying style changes to HTML tags in Django when the URL is altered?

https://i.sstatic.net/FSkdH.png If I have a navigation bar with buttons that turn white when clicked (by adding an "active" class), but when a button redirects to a new URL, the navbar reloads and the home icon is highlighted as the default. How can I ret ...

djangofrontend

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

javascriptjquerycssresponsive-designresponsive

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

htmlcssweb

Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

htmlcsstwitter-bootstrapbootstrap-4

Fetch several images simultaneously from a photo collection using JavaScript by generating a batch process

I need help with creating an image gallery that allows users to download multiple images by selecting them. The download should result in a zip file. I have checkboxes for selecting the images, but I'm struggling to figure out how to enable the downlo ...

javascriptjqueryhtmlbootstrap-4

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

Unleashing the Power of Reactstrap: Making Uncontrolled Collapse Panels Open by Default

Can the uncontrolled collapse be displayed as open by default? Below is the standard code for uncontrolled collapse, which is initially shown as a collapsed tab. <Button color="primary" id="toggler"> Toggle </Button> < ...

htmlcssreactjsbootstrap-5reactstrap

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Is it possible to create a Bootstrap 5 carousel with six items displaying at a time instead of three? I tried changing the value in the JS code, but it didn't work. Can you correct my code so that it displays six items at a time and can be variable la ...

javascripthtmljquerybootstrap-5

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...

cssreactjsnpmsass

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Having trouble calling a function and receiving an error message. How can I resolve this issue? The error message reads: index.html?email=&gebruikersnaam=&wachtwoord=&submit=Submit:1 Uncaught ReferenceError: formValidation is not defined at HT ...

javascripthtmlfunction

Send a collection of list items from the client to a Spring MVC controller

Is it possible to send a dynamically changing list of values to a Spring controller in a submission? I came across a solution on this page, but it only seems to work with input fields since you can't assign a name attribute to the li tag. <ul id=" ...

javahtmlspring-mvc

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...

javascripthtmljquerydatatables

A guide on displaying parent and child items from an array using PHP

I am a beginner in php and I have a simple question. I want to create a parent-child view using an array with key id and key parent. How can I properly structure this in a cycle? Do I need to start by creating a function for building the tree? -Apple ...

phphtmlparent-child

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

htmlangulartypescriptpipeionic4

Trigger an alert message upon clicking a button within CK Editor

Is it possible to trigger an alert message using ckeditor when a specific button is clicked? Below is the code snippet for reference: $(document).ready(function () { $(".cke_button__bold").click(function () { editor.on("CKEDITOR.cke_butto ...

javascriptjqueryhtmlckeditor

Tips on deobfuscating Next.js HTML from online sources

I am faced with the task of reconstructing a website that I scraped from the internet using wget. It seems to be built on next js, based on the presence of the _next folder. Even though I have no experience with nextjs and do not understand its inner worki ...

javascripthtmlnext.js