What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using

 .tag-container.bottom-border.col-middle
    h1.text-center {{ tag.name }}
    button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow

I am trying to align the tag name in the middle and the button on the right, but it is not displaying correctly. What is the best way to structure these two parts? Which CSS should I apply?

Thank you.

Update

Here is a simplified version of the basic HTML code

<row>
  <div>
    <h1> Tag name</h1>
  </div>

  <div class="pull-right">
    <button>Follow</button>
  </div>
 </row>

Feel free to make any modifications. Thank you

cssangularjstwitter-bootstrappug

Answer №1

For those who prefer to adhere strictly to bootstrap styles, the following code snippet can be used:

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <h1 class="text-center">Tag name</h1>
  </div>

  <div class="col-md-1 text-center">
    <button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
  </div>
</div>

To center the button vertically, additional styling will be required (instead of using inline margin-top: 1.5em).

It's worth noting that this styling will place the button below the h1 in mobile viewports, which may or may not align with your intended design.

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

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

phpcss

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

javascriptjquerycssxmliframe

Basic image slider featuring adjustable heights

I'm currently working on a basic content slider, but I've encountered an issue where the container doesn't expand as new content slides in. It seems to be related to the absolute positioning of the content items. If I don't use absolute ...

jqueryjquery-uicss

Storing a string in localStorage versus $localStorage in Angular 1 yields distinct value differences

I have encountered an issue in my angular controller where I am trying to save a token returned from an API endpoint as a string. In this example, I have used the variable testData instead of the actual token. var testData = "testdata" $localStorage[&apo ...

javascriptangularjsng-storage

Is it possible to use an ngClick function in one directive to toggle data in another?

Currently, I am in the process of developing a weather application using Angular 1.5.8 where users should have the option to switch between imperial and metric units for temperature and wind speed. The toggle feature along with all the weather data fetche ...

javascriptangularjsangularjs-directiveangularjs-scope

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

htmlcsssticky

Error message encountered when using CKEditor in an Angular.js application

While using ckeditor to edit content, I have included the module and linked all necessary files. However, an error is being thrown: TypeError: this[a] is undefined. As a newcomer to Angular, I'm unable to find a solution on my own. Could someone plea ...

javascriptangularjs

One can pass parameters to a promise's success callback within AngularJS using $q

I have encountered a situation that is similar to the one described in this post, but I am still unsure about how to implement it. I could use some assistance with setting up a successful callback. This is the current functioning code: function getStuff( ...

javascriptangularjsq

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

What is the best way to create five equal columns using bootstrap vue?

I found the reference here: My goal is to create 5 columns in 1 row This is my current script: <template> ... <b-row> <b-col cols v-for="club in clubs"> {{club.name}} </b-col> ...

twitter-bootstrapvue.jsvuejs2bootstrap-4vue-component

Enhancing the functionality of angular-messages is impacting the overall design of

Displaying here is the current state of my login form: However, subsequent to upgrading angular-message to version 1.4 and higher, the layout transforms into this: Sharing my source code for reference: <ion-view view-title="Login"> <ion-hea ...

cssangularjsionic-frameworkupgradeng-messages

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Assign the value of ng-options based on the AJAX string value

There are two select menus on this page that receive data through AJAX JSON after the page loads. They are related to each other and structured like this: <select name="category" id="category" ng-model="category" ng-options=" ...

angularjsselectangular-ngmodelng-options

The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

After spending a considerable amount of time, I managed to make my footer responsive by sticking it to the bottom of the page regardless of which page you are on. The code that achieved this is as follows: position: absolute; bottom: 0; However, the issu ...

css

Select elements in jQuery using both a specific selector and a negative selector

I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...

javascriptjqueryhtmlcss

Adjusting the height of a div according to the changing heights of other divs

The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically. I am exploring the possibility of using only CSS to make the height o ...

htmlcss

Tips on how to implement dropdownlist filtering with angularJs based on the selection from another dropdownlist

There are two dropdown lists in my code: <div class="control-group"> @Html.LabelFor(x => x.ServiceId) @Html.DropDownListFor(x => x.ServiceId, new SelectList(Model.ServiceList, "Id", "Title"), new { @class = "open" }) &l ...

asp.net-mvcangularjsrazorfilter

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

javascripthtmlcssreactjsmaterial-ui

Manipulate the ng-model value within a complex array structure

Currently, I am involved in a project where I am adding dynamic form attributes to the parent element. Here is an example of what the data looks like: $scope.uploadedFiles = [{ name: sample.jpg, attr: [{ id: "caption", display: "Titl ...

angularjsangularjs-ng-repeat

Gaps separating frames

<!Doctype html> <html> <frameset rows="26%,24%,*" noresize border="0" frameborder="no" framespacing="0"> <frame src="frame_a.html" target="_self" name="logo" scrolling="auto"> <frame src="frame_b.html" target="_self" name="menu" ...

htmlcss