What is the best way to position two elements within a fixed-size div container?

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

I am attempting to place the icon on the right side of the div, occupying 10% of the space, while ensuring that the title takes up 90% of the div's width regardless of its length.

<div class="col-md-12">
      <nb-card >
        <nb-card-body class="d-flex flex-row align-items-center">
          <label for="icon" class="label col-sm-3 col-form-label">{{title}}</label>
          <nb-icon id="icon" pack='eva' icon='minus-square' name="minus-square"
                    status="{{status}}"></nb-icon>
        </nb-card-body>
      </nb-card>
</div>

What specific classes should be included in order to achieve this fixed layout?

htmlcssbootstrap-4

Answer №1

When utilizing Bootstrap, take advantage of the Bootstrap Grid system by using the row and col classes. Additionally, create custom classes with CSS properties to achieve your desired spacing.

For example, adjusting margins can determine the space between text and buttons.

HTML:

<div class="content-rounded-border">
    <div class="row d-flex justify-content-center">
        <div class="col-md-12 d-flex justify-content-center text-left">
            <label id="title">Title</label><button type="button" class="btn-success btn-style">-</button>
        </div>
    </div>
</div>
...

<p><strong>CSS:</strong></p>

<pre><code>.content-rounded-border {
    display: block;
    width: 25%;
    height: 100px;
    margin-top: 0.5%;
    margin-left: 37%;
    padding-top: 2.5%;
    border: 1px solid black;
    border-radius: 5px;
}

.btn-style {
    margin-left: 5%;
    font-weight: bold;
}

jQUery (for toggling button):

$('#toggleBtn').on("click", function() {
    let titleVal = $('#title').html();

    if( titleVal == "Title" ) {
        $('#title').html("Super Long Title Omg");
    } else if( titleVal == "Super Long Title Omg") {
        $('#title').html("Title");
    }
});
...

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

Ensure that the sidebar in your React application occupies the full height of the page, regardless of the presence of scrolling

In my application, most of the pages fit within the viewport which is why I have been using height: 100vh for my <SideNav /> component. However, some pages now require scrolling and this causes issues with the sidebar as it abruptly ends when scrolli ...

htmlcssreactjsstyled-components

What is the best way to position a full width input beside my div element?

Having a small challenge with my CSS/HTML code, I am trying to position a full-width input next to my div. This is my HTML : <div class="leftdiv"></div> <input type="text" id="title-input" placeholder="nothing"></div> And here is ...

htmlcsstwitter-bootstrap

Why is it that a label tag cannot be placed directly above an input tag?

On this particular page: http://getbootstrap.com/components/#input-groups-buttons If you modify the Go! button to a label (using Chrome inspector), you will observe that the Go! button is no longer positioned on top of the input field: https://i.sstatic ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to arrange flex-column children from left to right?

I'm looking to arrange flex items from left to right within a flex-column layout. The Current Setup How I Want It to Look This is my code: display:flex; flex-direction: column; align-items:flex-end; justify-content: flex-start; align-content: flex- ...

htmlcssflexbox

With JSX and CSS in React, I have the ability to easily generate two columns, but unfortunately cannot achieve the same fluid

I am attempting to create a layout with three columns of text fields and labels. While I can easily achieve this with two columns, the third text field is appearing on a separate row below: <div className={styles.threecol}> <div className= ...

cssreactjsjsxspfx

changing font size on a mobile-friendly site using javascript

Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads: <p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p> Within the Bootstra ...

javascripthtmlcssbootstrap-4screen-size

Exploring the ins and outs of flexbox and utilizing overflow:auto

In my current situation, I have successfully resolved all cases but am now seeking assistance in debugging my mental model. Specifically, I am focusing solely on Chrome for the sake of simplicity. Within my nested "holy grail-ish" flexbox layouts, I have ...

cssflexbox

How can you enable a set of labels to expand and contract alongside their corresponding input fields?

Is there a way to create a group of labels that adjust their width based on the widest label without using tables in HTML or CSS? I need the input fields to shrink accordingly to fit the larger labels, as I deal with translations and cannot predict the wid ...

htmlcssformslabelinput-field

Is it Possible for TD Not to Function as a Hyperlink?

I've exhausted all topics but nothing seems to be working for me! My goal is to have a table completely covered with anchor tags, but for some reason, it's not displaying any links within the TD elements, not even the text! HTML <tab ...

htmlcsshtml-table

Load additional content seamlessly using Ajax in Django without needing to reload the entire navigation bar

I recently started working with Django as I develop my own website. I have created a base.html file which includes the main body, CSS, js, fonts, and navbar that will be present on all pages of my site. The navbar is located in another HTML file called nav ...

pythonhtmldjangoajax

CSS techniques for positioning a header image

I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...

htmlcssadobe-illustrator

Best practices for formatting JSON in PHP

Currently, I am utilizing PHP to gather inputs from an HTML form and insert them into a JSON file using the following code: $file = ('inputs'); $array = array( 'First Name' => $firstname, 'Last Name' = ...

phphtmljson

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

javascripthtmlmobilecordova

Using jQuery to detect when text is pasted into a contenteditable division

On my HTML page, I have a contenteditable div acting as a textarea: <div id="txt" contenteditable="true"></div> To capture the user's input, I am using jQuery to listen for "input paste" $('#txt').on('input paste',fu ...

javascriptjqueryhtmlinternet-explorer

Ways to divide background color in half using CSS

Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code? This is what I've tried so far in CSS: .logindiv { height: 200px; width: ...

htmlcssbackground

URL not functioning within anchor tag in Django template

In my Django project, I have implemented a custom user model. During the registration process, the user is required to provide the URL of their company's website. I am able to access and display this information in the template using the USER variable ...

pythonhtmlcssdjangobootstrap-4

Could there be a glitch in Chrome? Tweaking the CSS on the left side

Take a look at this jsfiddle where I modified the left CSS property by appending "px" to it: function adjustLeft(leftVal) { var left = parseFloat(leftVal); //tooltip.style.left=left; tooltip.style.left=left + "px"; log("left: " + left + ", ...

javascriptcssgoogle-chrome

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a method to utilize a require()-esque function within an HTML document to display a nested HTML file?

I am currently exploring the use of an HTML template as a frame, with the goal of loading content dynamically based on the route. Coming from a PHP background, I am familiar with the require($file) function which embeds the necessary file inside the templa ...

htmlnode.js

What are some methods for creating a tooltip or a similar quick information pop-up that appears instantly when hovered over?

I'm familiar with creating a basic tooltip by utilizing title="here's a tooltip", but I'm interested in having it appear instantly upon hovering instead of the usual delay. Is it feasible to achieve this using different tools such ...

javascripthtmlcss