What is the best way to center a text and a rectangle (containing some text) on a page using Bootstrap?

I'm in the process of creating a webpage using HTML and CSS that needs to look exactly like this image: https://i.sstatic.net/wYKZw.png

Currently, I have a version of it on JSFiddle.

The issue with the JSFiddle version is that the text and rectangle (with text inside) are aligned to the left and right-center of the page, but I want them centered on the page with some space between them as shown in the image. Here's the HTML code I'm currently using:

<div class="sections">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 left-side"> <a href="">Development & Design</a></div>
            <div class="col-lg-6 right-side"> <a href="">Web Designer Qualifications Go here</a></div>
        </div>
    </div>

I'm unsure whether I need the .col-lg-6 class as used above to replicate the image. If not, should I use col-lg-offset-1 in my HTML code to achieve the desired image replication?

htmlcssbootstrap-4

Answer №1

For the screen size you're working with in col-lg, using justify-content-center in the enclosing <div> will help align the elements to the center by distributing empty space on both sides of the elements. In my case, I used col-lg-4, but feel free to adjust it according to your preferences.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="sections">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-3 left-side"> <a href="">Development & Design</a></div>
      <div class="col-lg-3 right-side">
        <a href="">Web Designer</a>
        <!-- list requested in the comments Here -->
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Explore more details on Bootstrap Documentation

Answer №2

Give this code a try:

.sections{
    width: 100%;
}
.sections .row {
    padding-top: 100px;
}

.sections .left-side {
    font-style: italic;
    float:left;
    width:45%;
}

.sections .right-side {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    max-width: 320px !important;
    height: 100px;
    font-style: italic;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 10px;
    float: right;
    width:50%;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Homesail</title>
    <link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test.css">
</head>




<body>


    <div class="sections">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 left-side"> <a href="">Development &amp; Design</a></div>
                <div class="col-lg-6 right-side"> <a href="">Web Designer</a>
                <ul>
                  <a href=''><li>Qualification</li></a>
                  <a href=''><li>Go here</li></a>
                </ul></div>
            </div>
        </div>
    </div>
</body>

</html>

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

What is the best way to center a specific element within a flex container?

Is there a way to center a specific div within a flex container? Let me explain using some code: Take a look at this code snippet: <html> <head> <style> div.flex_container { display: flex; flex-direct ...

htmlcssflexbox

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

Rearrange the order of the next button to appear after the dropdown instead of the

When a button is clicked, the paragraph area should display while pushing down the next button/div and the rest of the page below it. In simpler terms, clicking on the button reveals the box without overlapping other elements. I apologize for any language ...

javascripthtmlcss

Encountering difficulties integrating Bootstrap with Angular CLI project

I am facing an issue while trying to integrate Bootstrap 4 RC6 into my Angular CLI project. Despite following the necessary steps, I am encountering an error that I cannot quite explain. Here is a detailed overview of what I did to create the project: Fir ...

node.jsangularsassangular-clibootstrap-4

Utilize Bootstrap multiselect for extracting values from optgroups and options

Having a select element with optgroups and bonded values, the structure is as follows: <select id="example-dataprovider-optgroups" multiple="multiple"> <optgroup label="Lime No. 2" value="b3a2eff6-5351-4b0f-986 ...

javascriptjquerybootstrap-4bootstrap-multiselect

What is the method for updating the form action to alter the hash without causing a page reload?

My website is designed to show dynamic data based on the information following the '#' in the URL. Surprisingly, when I manually change this value in the URL, the page doesn't reload. However, if I modify it within a form on the site, the we ...

javascriptjqueryhtmlformshash

Engaging Interactive Image/Graphic with React and HTML

Just starting out with react/html and attempting to create an interactive Graphic/Image. My goal is to have a circle highlight in color when the mouse hovers over it, and change to a different color when clicked. Is this achievable? Any advice on how to ac ...

htmlreactjssvg

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

Using JQUERY, CodeMirror adds elements to the HTML editor

I have been utilizing CodeMirror for my project, specifically the "HTML Editor With Preview" module. To test its functionality, I created a fiddle: --> http://jsfiddle.net/Vu33n/6/ While I successfully got the editor to work, I am currently facing an ...

jqueryhtmleditorcodemirror

Ways to apply color conditions to table rows based on table data values?

I am using ngFor to create a table from two arrays in Angular typescript. <tr *ngFor="let e of lis1; let k=index"> <td>{{e}} </td> <td>{{lis2[k]}}</td> </tr> The resulting table l ...

htmlcssangulartypescripthtml-table

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

Overflow error in Rsuite table row cannot be displayed

Please see the image above Take a look at my picture. I am facing a similar issue. I am struggling to display my error tooltip over my table row. Has anyone else encountered this problem before? Any suggestions for me? I have attempted to set the overflow ...

cssreactjsrsuite

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

javascriptjqueryhtmlresponsivefootable

Error in RatingBar component: Vue.js 3 and Tailwind CSS not displaying dynamic width correctly

I have a component called RatingBar in Vue.js 3 with Tailwind CSS. My goal is to dynamically adjust the width of the parent element's class based on a value, but even though I see the desired width in DevTools, it always renders as 100%. Below is the ...

cssvue.jsvuejs3tailwind-css

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

Having difficulties creating an array due to identical id tags causing HTML to break in JavaScript

I've been grappling with this issue all day. Before delving into dynamic solutions, I'd like to create multiple divs with unique id tags or classnames rather than repeating ids. Whichever option proves simpler would be greatly appreciated. Curren ...

javascripthtmlarraysjson

Apply CSS styles to a group of elements retrieved from an object

How can I apply CSS properties to each element in a collection using jQuery? const cssProperties = { "color": "#555555", "font-weight": "bold", "text-align": "left" }; const $tdCollection = $("tr:first-child").find("td:nth-child(2)"); // Co ...

javascriptjquerycss

Customizing HTML list headers using an external JavaScript function

Hi everyone, I've been working on a login page and I want to enhance the user experience by displaying the logged-in user's username at the top of the screen, which can then trigger a dropdown list upon clicking. To achieve this, I've writt ...

javascriptjqueryhtml

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas

Two collapsible menus featured in the navigation bar

My navbar is displaying two collapse menus, but when one is active and I open the second one, the collapsed content from the second menu gets added to the end of the first one's content. How can I close the other menu when opening the second one? h ...

htmlcsstwitter-bootstrapbootstrap-4