Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this point:

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

Seeking assistance, as the alignment of items is not as desired. Can anyone provide guidance?

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, each element must be placed in a single row. In your case, you have 3 rows to work with.

Visualize each row like this:

Each line represents a single row. Placing content within one row element will display it in a single line; spreading the content across multiple rows will display it accordingly.

Your code structure should resemble the following:

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

If this solution does not address your issue, feel free to return for further assistance.

UPDATE

Based on new information provided, an updated solution would look like this:

<div class="container-fluid top">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
</div>
<div class="container-fluid center">
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid bottom">
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

.top {
  position: aboslute;
  top: 0;
}

.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bottom {
  position: absolute;
  bottom: 0;
}

Answer №2

The align-items attribute is influenced by the height of the row. It is important to correctly set the height for the row in order to control alignment.

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

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

I encountered an issue while attempting to call a bootstrap modal using a simple button or link, which may be due to a conflict with my select2 plugin (although I am uncertain). I tried appending the button to the select2 dropdown but it doesn't seem ...

javascriptjqueryhtmltwitter-bootstrap

What is the process for extracting HTML code from a website and converting it into a string for use in VB?

Storing the page source in the variable HTML is known to me. Dim Client As New WebClient URL = Console.Readline HTML = Client.DownloadString(New Uri(URL)) However, it has been observed that not all elements from a website are saved using this method. For ...

htmlvb.netweb-scrapingwebclient

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

javascriptimagehtmlsrcorbit

Javascript Callback function not working as expected

I'm attempting to include an anonymous callback function in my code. I know it might seem a bit messy. By typing into the intro section, it triggers the animation using the .typed method with specific parameters. What I'm struggling to do is imp ...

javascripthtmlanimation

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

javascripthtmlangularjstwitter-bootstrap

Deciding on the Best Watcher for Running `make watch` in Twitter Bootstrap

When it comes to making watch on Twitter Bootstrap, should we be utilizing watchr for Node.js or the gem watchr? A previous discussion recommended using the gem version of watchr. I attempted to do this with gem watchr, following the instructions from htt ...

node.jstwitter-bootstraprubygemswatchr

What is the process for creating an if statement for product activation?

<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...

javascripthtml

Preserve text input from a multi-line textarea

Having an issue with a form that includes a <textarea>....</textarea> field. When saving the text, it displays the result in another form but as one continuous line within a paragraph <p>...</p>. The problem arises when trying to e ...

jqueryhtmlcss

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

htmlcssangularjsionic-framework

Is there a way to locate and delete an image element with a broken hyperlink?

My website is currently hosted on Wordpress, and I've noticed that there is an issue with a broken image link on my site. I'm not sure when this occurred, but it seems to only be affecting the post section of my site. https://i.sstatic.net/iarDU ...

javascriptphphtmlwordpressbroken-image

What is the best way to create an HTML table using a two-dimensional list in Python?

I am currently facing an issue with the functionality of my code. The HTML is being generated as desired, but it appears at the top of the page rather than in the intended location. def fixText(self,text): row = [] z = text.find(',') ...

pythonhtmllisthtml-table

The animation of the background color over an image appears glitchy when viewed on Safari

I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have ...

htmlcsssafaricss-animations

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

javascriptjqueryhtmlcssvariables

How can I create a loop to iterate through form/input files with varying titles?

Looping through input files with different titles Hello, I am trying to figure out how to loop through an input file with different titles. Each input file has a unique title, such as Safety Data Sheet, Certificate, etc. This is my current code: $titles ...

phphtmlformsloopsforeach

Update the output paragraph in an HTML dropdown list

Within my HTML code, there is a dropdown list followed by a paragraph. Inside the dropdown list, I have included options for various animals - Dog, Cat, Mouse, and Bird. When someone selects 'Cat' from the dropdown list and presses submit, I wan ...

html

What is the best way to have dual backgrounds displayed on a single webpage?

Looking to recreate the background design featured on this website: www.zucoffee.com. Does anyone have any tips? In addition, I'm curious about how to achieve that curved separation effect. I understand it involves two divs, but how did they manage t ...

htmlcssbackgroundbackground-color

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

javascripthtmlangular