Arrange icons to the left and center text on a top bar using Bootstrap

Is there an easy way to align icons to the left side with a logo and center text on a top bar using Bootstrap CDN on a website?

Check out this picture of a top bar

<div class="topbar clearfix"> 
    <div class="container">
        <div class="row-fluid">
            <div class="col-md-4 text-left">
                <div class="social">
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>              
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Google Plus"><i class="fa fa-google-plus"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Linkedin"><i class="fa fa-linkedin"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Youtube"><i class="fa fa-youtube"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a>
                </div><!-- end social -->
            </div><!-- end left -->
            <div class="col-md-8 text-right">
                <p>
                    Check out our online store offering a wide range of phyto-lamps and industrial lighting options. &nbsp;&nbsp;
                    <strong><i class="fa fa-phone"></i></strong> <a href="tel:+74991000000">+7(499) 100-00-00 </a>
                </p>
            </div><!-- end left -->
        </div><!-- end row -->
    </div><!-- end container -->
</div>
htmlcsswordpresstwitter-bootstrapbootstrap-4

Answer №1

give it a shot with the following code snippet

 class="container-fluid"

then modify the col-md-4 based on your specific requirements

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

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

htmlcss

nginx proxy in front of wordpress (accessible from multiple sources)

It was quite a challenge for me to figure out how to configure Word-press to display its page behind a proxy. I managed to successfully load the page links and style files correctly, but encountered a 404 error when trying to access admin pages. After rebu ...

phpwordpressnginxproxy

Infinite reload loop triggered by Angular GET method in HTML integration

I am currently tackling a project that involves populating a dynamic number of buttons with links to documents for opening them. <tr *ngFor="let competence of competences; let i = index">{{competence.name.de}} <td *ngFor="let competenceLevel of ...

htmlangulartypescript

Bent CSS3DObject in Three.js

I'm attempting to manipulate a CSS3DObject in Three.js by bending it: var element = document.createElement('iframe'); element.src = 'https://example.com/'; var cssObject = new THREE.CSS3DObject( element ); However, I'm unabl ...

cssthree.js

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

csssvg

Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng: npm install font-awesome primeng --save I included CSS in the webpack vendor list: vendor: [ ...

cssangularwebpackprimeng

Warning: PHP foreach loop

I'm struggling with a warning message in my HTML table that's connected to a MySQL database using PHP. The warning says "Warning: Invalid argument supplied for foreach()." I'm utilizing the PHP foreach function within my HTML code, and I att ...

phphtmlmysqlforeachwarnings

establishing the default value as p-multiselect

Here is the code snippet I am currently working on: export class LkBoardStatus { id : number = 0; descr : string = ''; } In the component.ts file, I have defined the following: //... lkBoardStatusList: LkBoardStatus[] = []; selectedStat ...

htmlangulartypescriptdrop-down-menuprimeng

Angular Material: Enhanced search input with a universal clear button

After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...

javascriptcssangulartypescriptangular-material

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity

The layout features two full-width columns, with the first column containing a resizable textarea

I am interested in creating an editor that displays code on the left and its result on the right. Why is the text inside <div> #right stuck to the white/blue boundary? Why is there no padding? (I would like a 10px padding). * { margin: 0; padding ...

htmlcss

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

javascripthtmlcsstypescriptsvg

Expanding the number of tags in wp_nav_menu_container_allowedtags for WordPress

I'm currently working on designing a custom WordPress theme. By default, WordPress only allows the use of Div and Nav tags in wp_nav_menu_container_allowedtags. However, I am interested in adding an additional tag, namely Select. To achieve this, I ...

phphtmlwordpresswordpress-theming

jQuery - encountering issues setting CSS properties within an AJAX callback function

I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...

cssjquerycallbackbackground-color

Creating a custom file input field with Bootstrap 4

I've been attempting to incorporate the custom-file-input feature using bootstrap4 alpha 6, but I'm encountering a blank area after adding it, like this: <label class="custom-file"> <input type="file" id="file" class="custom-file-in ...

csstwitter-bootstrapinputbootstrap-4twitter-bootstrap-4

Adjust the input group position in relation to the dropdown menu using Bootstrap.js

As a newcomer to Bootstrap.js, I'm facing challenges in aligning an input-group next to a dropdown side-by-side. Despite trying the table approach, I have not been successful as the elements end up being vertically misaligned. Can someone provide guid ...

htmlbootstrap-4

Tips for displaying images dynamically in HTML using AngularJS

src={{logo}} var logo = 'localhost:3000/modules/images/default.png' I'm trying to display the image path dynamically, but it's not showing up in the HTML. Do I need to use quotes for src? Can someone please assist me with this issue? ...

javascripthtmlangularjssrc

Transmit information to an HTML website displayed within a QT GUI utilizing QWebview

Currently, I am developing a desktop application using QT (c++) that integrates a website created with a basic html file (including javascript) through Qwebview. The website consists of a plugin and html boxes where the data entered triggers changes in the ...

htmlc++qtplugins

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...

javascripthtmlcssresponsive-designjqvmap

How to display HTML string in iOS using Swift without using UIWebView

Is there a way to display the following HTML string in a UITableViewCell? How can I achieve this? <p>\r\n\t Samsung Full HD delivers stunning images, whether it's a premium-quality 2D picture or an incredible 3D experience. When ...

htmliosiphoneswiftxcode