Is it possible to center my tab on the page and add captions as well?

Struggling to align a tab with 3 image buttons in the middle, I resorted to using manual margin adjustments. I also added captions separately from the buttons for aesthetic purposes, but know this is not the correct way. Is there a way to attach the captions directly to the buttons? Additionally, I need help spacing the buttons 50px apart within the tab. I am using bootstrap to align elements in a less than ideal way and seek guidance on proper alignment techniques. I will provide my code and a screenshot for reference. Thank you!

Check out the current output achieved through manual margin tweaks and bootstrap, which looks messy when resizing the screen.

.box {
  width: 100%;
  height: 700px;
  background-color: #f6f6f6;
  margin-bottom: 40px;
}

.tab {
  opacity: 0.8;
  padding: 100px 0px 0px 0px;
  margin-left: 200px;
  width: 100%;
  display: inline-block;
}


/* Style the buttons that are used to open the tab content */

.tab button {
  background-color: inherit;
  float: left;
  border-color: grey;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.4s;
  font-size: 35px;
  tab-spacing: 30px;
  color: rgb(105, 105, 105);
}

.resumeicon {
  width: 253px;
}

.coverlettericon {
  width: 250px;
}

.interviewicon {
  width: 250px;
}

.ressettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
}

.coversettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
  margin-left: 50px;
}

.intsettings {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
  margin-left: 30px;
}

.hint {
  font-family: 'Coiny', Serif;
  font-size: 40px;
  text-align: center;
  color: navy;
  padding-top: 60px;
  margin: 0px 150px 0px 150px;
}
<div class="box">
  <div class="hint">Looks through Resumés, Cover Letters, and Interview Questions in the field you chose...</div>

  <!-- THIS IS WHERE THE RESUME/COVER LETTER/INTERVIEW ICONS START -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Resume')"><img class="resumeicon" src="/Users/mtaslagyan/Desktop/resumania/images/resumeicon.PNG"></button>
          <button class="tablinks" onclick="openTab(event, 'CoverLetter')"><img class="coverlettericon" src="/Users/mtaslagyan/Desktop/resumania/images/coverlettericon.PNG"></button>
          <button class="tablinks" onclick="openTab(event, 'Interview')"><img class="interviewicon" src="/Users/mtaslagyan/Desktop/resumania/images/interviewicon.PNG"></button>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-2 ressettings" align="center">Resumé</div>
      <div class="col-md-2 coversettings" align="center">Cover Letter</div>
      <div class="col-md-2 intsettings" align="center">Interview Questions</div>
      <div class="col-md-3"></div>
    </div>
  </div>
</div>

While I understand my approach may lack professionalism, I aim to achieve the desired output efficiently and correctly. Any suggestions on how to improve the alignment and overall structure of the tab are greatly appreciated.

htmlcssalignmentbootstrap-4

Answer №1

Indeed, you are correct. It is not the most professional approach. You seem to be implementing quite a bit of custom CSS. The main goal of Bootstrap is to minimize the need for extensive custom styling. Bootstrap takes care of a lot for you across various screen sizes. When utilizing Bootstrap, it is recommended to keep your own CSS to a minimum.

Here is an improved version of your code:

<div class="box">
        <div class="hint">Browse through Resumés, Cover Letters, and Interview Questions in your chosen field...</div>

    <div class="container-fluid">
        <div class="row">
          <div class="col-lg-1 col-md-1"></div>
          <div class="col-lg-3 col-md-3" style="text-align:center;">
                    <button class="tablinks" onclick="openTab(event, 'Resume')"><img class="resumeicon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/resumeicon.PNG"></button>
                  <label style="caption-style">Resume</label>
                </div>
                 <div class="col-lg-3 col-md-3" style="text-align:center;">
                    <button class="tablinks" onclick="openTab(event, 'CoverLetter')"><img class="coverlettericon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/coverlettericon.PNG"></button>
                    <label style="caption-style">Cover Letter</label>
                </div>
                <div class="col-lg-3 col-md-3" style="text-align:center;">
                   <button class="tablinks" onclick="openTab(event, 'Interview')"><img class="interviewicon iconimage" src="/Users/mtaslagyan/Desktop/resumania/images/interviewicon.PNG"></button>
                    <label style="caption-style">Interview Questions</label>
                </div>
    </div>
  </div>
</div>

It is advisable to stick to the provided HTML structure, and now, here is the concise CSS to accompany it:

.hint{
    font-family: 'Coiny', Serif;
    font-size:40px;
    text-align:center;
    color:navy;
    padding-top:60px;
    margin:0px 150px 0px 150px;
}

.iconimage{
  width:250px;
  }

  .caption-style{
  font-family: 'Satisfy', cursive;
  font-size: 30px;
  color: dimgrey;
  text-align: center;
   }

Typically, only use CSS for text styling, as Bootstrap provides its own text/caption styles. For images, consider using width:100% instead of width:250px in the "col-lg-3" class to ensure full width coverage.

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

Steps for adding a div after a specified number

To display the following div after getting a value greater than or equal to the specified value and retrieving it through ajax: 1. How can I show the below div with the given value? .mainbox{ width:auto; height:auto; padding:20px; background:#f00; } .i ...

javascripthtmljson

Display a large feather icon on the left side with the title and description positioned on the right side

I'm trying to achieve a flex-style UI that resembles this design: https://i.sstatic.net/2mFrm.png So far, I've managed to split the UI using col-5 col-2 col-5 classes from Bootstrap and utilize flex to create the col-5 UI sections (left and rig ...

htmlcssbootstrap-5

Transferring the dirty state of the view to the parent form

Within my main form's markup, there is a specific structure that includes a tabset and a selectView method in the controller: <tabset vertical="true" type="pills"> <tab ng-repeat="tab in tabsViews" sele ...

javascripthtmlangularjscontroller

Which SSO framework works best for integrating Facebook and Twitter logins?

I own a website and I'm looking for a way to let users leave reviews and rate products. I need an SSO system that allows them to sign in with their Facebook or Twitter accounts and ensures each user is uniquely identified so they can't rate produ ...

javascriptjqueryhtmlsingle-sign-on

What causes the vertical movement of my Bootstrap v5 card when resizing the window?

Issue: While working on my website and implementing three cards using Bootstrap, I encountered a problem. When I resize the window vertically, all the elements shift upwards and overlap with other elements, ruining the look of the site. I suspect the issu ...

htmlcssoverlapbootstrap-5bootstrap-cards

extract information from the HTML id attribute and assign it to a PHP variable using the GET method

After reviewing numerous examples, I am still unable to retrieve the value from the ID attribute in my input element. This identifier is crucial for deleting records from the database, but my attempts with Get method have been unsuccessful. <?php ...

phphtmlattributes

Angular dropdown filtering techniques

I need a select HTML element that can be replicated multiple times on one page. Each select element should display options from a main list, filtering out any items already selected in other select elements unless they were just duplicated. However, when ...

htmlangularjsinternet-explorergoogle-chrome

Eliminate redundant XML entries when using jQuery autocomplete

Does anyone know how to prevent duplicate records from appearing in a jQuery autocomplete dropdown? I am pulling data from an XML file and want to ensure that each record is unique and only displayed once. You can see the issue here ...

javascriptjqueryhtmlajaxxml

Using jQuery, locate identical text and assign a class to the corresponding container

How can I check if any of the h2 elements match the text in h1, ignoring case sensitivity? If a match is found, I want to add a class to the container Product-div. <div id="PageHeader"> <h1>Same text</h1> </div> <div class= ...

jquerycssmatchcase-sensitive

Tips for customizing fonts in a WordPress object

WordPress is sending me an object that I need to work with. The main issue at hand: the font styles of WordPress posts in my app are all inconsistent. How can I go about styling these fonts uniformly? Take a look at this Plunkr if you'd like to expe ...

angularjscss

What is the best way to show a loading message during a background task in Flask?

I'm currently facing the following scenario: index.html file: <div class="col-xl-3 col-md-6"> <div class="card bg-primary text-white mb-4"> <div class="card-body">Prima alimentazione</div> <div class="card-f ...

pythonajaxflaskbootstrap-4

Trouble with Displaying 3rd Level JQuery Dropdown Menu

Currently working on implementing a 3 level dropdown feature. I have been using a third-party responsive menu in Opencart and it's been working well. You can see a demo of it here: Unfortunately, Opencart does not natively support 3 level categories, ...

javascriptjqueryhtmlcssopencart

When using CSS float:left and overflow:visible, the text may get cropped-off at

I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...

javascriptcsscss-floatoverflow

Text placed over a video player

I have created a full-screen div with a video playing in the background and I need to overlay some HTML on top of it. However, when I add the HTML elements, they briefly appear and then disappear once the video starts playing. What could be causing this i ...

htmlbootstrap-4html5-video

When you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

I need help with creating a popover that appears when hovering over an anchor tag. Here is the code I am using: angular: 1.4.2 ui-bootstrap :0.14.2 <div class="row" ng-repeat="endorsement in endorsements| filter: {category:categorySelected}"> &l ...

javascriptcssangularjstwitter-bootstrap

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

I am required to filter out any child elements from a find() operation

HTML: <ul> <li class="listExpandTrigger"><h3>2010 - present</h3></li> <li class="listCollapseTrigger"><h3>2010 - present</h3></li> <li> <ul class="volumeList"> <l ...

javascriptjqueryhtmlcss

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

The content section sits discreetly behind the sidebar

Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...

javascripthtmlcssflaskbootstrap-5

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

htmlangularjsasynchronous