Tips for aligning two elements in a row using Bootstrap 4 Flex

I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex.

Here is what I have:

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

This is what I am trying to achieve:

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

Below is my code snippet:

<div>
    <div class="d-flex justify-content-center">
        <h2 class="text-center">Resultado de aprendizaje A</h2>
    </div>

    <div class="dropdown d-flex justify-content-end">
       <button class="btn btn-outline-light" type="button" id="dropdownMenu2" data-toggle="dropdown" 
           aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-ellipsis-h p-1" style="font-size: 18px"></i>
      </button>

      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
         <a class="dropdown-item" data-toggle="modal" data-target="#resultadoModal}edit">Editar</a>  
         <button class="dropdown-item" >
            Eliminar
         </button>
      </div>
   </div>
</div>

Answer №1

If you're using this code snippet as a reference, keep in mind that there may be other issues to address. Make sure you have all the necessary CSS code for dropdown functionality.

Simply adding classes without understanding how Bootstrap 4 works can lead to future problems. Take the time to learn how flex works, especially when nesting <div> elements with classes.

Check out these resources to better understand flex:

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

https://getbootstrap.com/docs/4.3/utilities/flex/

By mastering flex in Bootstrap 4, your coding experience will be much smoother. Happy coding!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="d-flex justify-content-between" style="background:black">
    <div></div>
    <div>
        <h2 class="text-center" style="color:white">Resultado de aprendizaje A</h2>
    </div>

    <div class="dropdown mr-3">
       <button class="btn btn-outline-light" type="button" id="dropdownMenu2" data-toggle="dropdown" 
           aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-ellipsis-h p-1" style="font-size: 18px"></i>
      </button>
   
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
         <a class="dropdown-item" data-toggle="modal" data-target="#resultadoModal}edit">Editar</a>  
         <button class="dropdown-item" >
            Eliminar
         </button>
      </div>
   </div>
</div>

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

It's a mystery unraveling the source of CSS margins and padding

Could someone please help me analyze this webpage? I am trying to make the center of the page white up to the navigation bar, at the bottom of the page, and horizontally up to the shadows on both sides. I'm not sure where this extra padding is coming ...

Connecting a hero image in CSS for Flask application: a step-by-step guide

Adding a hero image to my Flask app page has been challenging. Here is the directory structure of my Flask project: -static |--css_files |--my.css |--images |--img.jpg -templates |--layout.html In order to incorporate a hero image, I have includ ...

Repositioning with Flexbox: shifting the middle element to a new line

I have a flex item that contains three divs. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬─ ...

Switching effortlessly between Fixed and Relative positioning

As I work on creating a unique scrolling experience, I aim to have elements stop at specific points and animate before returning to normal scroll behavior once the user reaches the final point of the page. Essentially, when div X reaches the middle of the ...

Issue with Bootstrap Carousel displaying as a static image instead of a slide

I have worked on creating a Portfolio.js file using the react library with react-bootstrap Carousel.js to build an uncontrolled carousel. However, my code is showing the slides vertically instead of behaving like a typical carousel. You can view my code at ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

The aria-expanded attribute is not functioning as expected in a bootstrap template

I recently downloaded a template from this website: Within the template, there is a page named cards.html On this page, there is an example of a collapsible card. I am attempting to make it load in a collapsed state so that the user has to manually expan ...

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

When scrolling, a new page loads seamlessly

Recently, I came across a website that has an interesting feature where new content is loaded automatically while scrolling, seamlessly appending to the existing page. What's more fascinating is that not only does the content change, but the URL also ...

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

This code appears to be invalid based on W3C standards - unsure on the solution to correct the errors

My website is quite large, but unfortunately it contains 31 errors. I am unsure of how to go about fixing them. I would greatly appreciate any assistance in resolving these errors, especially the ones that seem to appear for unknown reasons: http://valid ...

Understanding the purpose of the notched property in Material-UI

I am currently integrating Material-UI into a project and exploring their API. One thing that I find confusing is the notched property within the OutlineInput Component. <FormControl variant='outlined'> <OutlinedInput notched={false} ...

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

I'm currently working on application development using ReactJs and Material UI. When I try to open the application in Mozilla Firefox, an error message pops up saying "TypeError: CSS2Properties doesn't have an indexed property setter for ' ...

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: https://i.sstatic.net/UoMs ...

What is preventing my divs from aligning properly?

After trying various methods and conducting thorough research, I am still unable to resolve the issue with my code. Could someone please review it and provide some guidance? Any help would be greatly appreciated. I have experimented with different div wid ...

Why is it that aligning items in a row doesn't seem to function properly when I apply a custom class to a container-fluid in Bootstrap 4?

Recently, I started delving into the world of front end development. After mastering the basics of HTML5 and CSS3, I ventured into Bootstrap 4. My current project involves creating a replica of the Facebook login page. To achieve a full-width design, I uti ...

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

The image tag in HTML is unable to display as an image within the jQuery object

After converting the object "suggestion" to a string, I have data stored in the "sugestion" variable like this: {"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"} Unfortunatel ...

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...