Arranging two columns side by side with Bootstrap

Is it possible to align two boxes next to each other, one on the left and the other on the right? Additionally, how can I make sure that the mytitle box expands to full width on mobile devices?

If floats are necessary, how can they be added when a class has already been defined? Here's a portion of the code I have so far...

<div class="container">
    <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p class="mytitle" align="center"><strong>Information</strong></p>
              <p><br></p>
              <p class="info-news"><img src="image/catalog/bullet.png" width="18"   height="20"><a href="http://example.com/information_id=4" target="">Our team</a></p>
              <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20"> <a href="http://example.com/information_id=6" target="">Couriers</a></p>
              <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20">   <a href="http://example.com/information_id=8" target="">Refunds</a></p>

          <div class="col-sm-6 hidden-xs">
              <div id="signup">
                  <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
              </div>
          </div>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

As pointed out by Shehary, the first column in your code is missing the closing </div> tag.

To enhance visibility on larger screens, consider adding the class "col-lg-6" to your columns. The example below illustrates this:

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-6">
        <p class="mytitle" align="center"><strong>Information</strong></p>
        <p><br></p>
        <p class="info-news"><img src="image/catalog/bullet.png" width="18"   height="20"><a href="http://example.com/information_id=4" target="">Our team</a></p>
        <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20"> <a href="http://example.com/information_id=6" target="">Couriers</a></p>
        <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20">   <a href="http://example.com/information_id=8" target="">Refunds</a></p>
    </div>

    <div class="col-sm-6 hidden-xs col-lg-6">
        <div id="signup">
            <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
        </div>
    </div>
</div>

To simplify styling, consider utilizing bootstrap grid examples rather than writing custom CSS. Bootstrap offers pre-defined classes that can be helpful, such as alignment classes like text-center.

In your code, you have manually aligned text to the center using align="center". This can be replaced with the bootstrap class text-center, as shown below:

<p class="mytitle text-center"><strong>Information</strong></p>

Answer №2

This solution has been really effective for me, give it a try.. No need to worry about adding floats or anything like that :)

<div class="container">
     <div class="row">
      <div class="col-xs-12 col-sm-6">
          <p class="mytitle" align="center"><strong>Important Information</strong></p>
          <p class="info-news">
            <img src="image/catalog/bullet.png" width="18"   height="20">
            <a href="http://example.com/information_id=4" target="">
                Meet our team
            </a>
          </p>
          <p class="infonews">
            <img src="image/catalog/bullet.png" width="18" height="20"> 
            <a href="http://example.com/information_id=6" target="">
                Learn about our Couriers
            </a>
          </p>
          <p class="infonews">
            <img src="image/catalog/bullet.png" width="18" height="20">   
            <a href="http://example.com/information_id=8" target="">
                Easy Refund Process
            </a>
          </p>
 </div>
 <div class="col-sm-6 hidden-xs">
  <div id="signup">
   <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
 </div>
  </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

A guide to creating full-screen Angular components that perfectly match the size of the window

Currently, I am working on an Angular project where in my app.component.html file, I have various components like this: <app-selector1></app-selector1> <app-selector2></app-selector2> ... I am trying to figure out how to make my c ...

cssangular

The div element is just a tad smaller in size (0.085 smaller as per the CSS calculation)

I have a div with fixed height and width of 24px with a background image, but the browser is cropping off 0.1 pixels... div { width: 24px; height: 24px; background: url(svg); } Upon inspecting the computed styles, I noticed that the height is actua ...

htmlcss

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

I am currently facing a situation where I have an application with an existing user base. I am looking to avoid disrupting their current links for a smoother transition. However, the previous links are in this format: (server)/viewer/#/?id=12. Please see t ...

javascripthtmlangulartypescript

Enhance the size of the arrow in React Material-UI tooltip

Is there a way to make the tooltip arrow bigger in Material UI v4? I came across a workaround for the react-tooltip library that involves using the border-width css property. Any suggestions for achieving a similar result with MUI tooltips? ...

cssreactjsmaterial-uitooltip

Implement a functionality to retrieve uploaded files by utilizing the onChange event of a

I'm currently working on converting this jQuery code to React: //Js $(".custom-file-input").on("change", function() { var files = Array.from(this.files) var fileName = files.map(f =>{return f.name}).join(", ") $( ...

javascripthtmljqueryreactjs

Ways to create a div that automatically increases in height to fit its text when the browser size decreases

In the following code snippet, there is a top bar with a lengthy text: <div class="topbar"> <div style="float:left;height:36px;line-height:36px;text-transform: none;"> long text.... </div> </div> Within the topbar ...

htmlcss

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

cssdoctypecss-transformsquirks-mode

Styling links conditionally in a React component

How can I style the page title in my nav bar when I am on the selected path? I am using React and Tailwind CSS. For example, I want the title to turn yellow when I am on the current page. Here is the logic I have tried, but it doesn't seem to be work ...

javascriptcssreactjsnext.jstailwind-css

How can I write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

javascriptjqueryhtml.net

Is it possible to update the text in a select input from a dropdown menu within

In my example modal, I have included two components: a dropdown and an input text field. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Test Modal</button> ...

javascripthtmlmodal-dialogbootstrap-modal

What is the best method for establishing a page location during rendering/onload?

It seems like there is a JavaScript event happening here using the onload attribute. But for the life of me, I can't seem to crack this code. <body onload="moveToHere('reference')"> I'm stuck and could really use some assistance ...

javascripthtml

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

Turn off the autofill option for passwords in Google Chrome

Is there a way to prevent the password autocomplete dropdown from appearing when clicking on the password field? In Chrome Version 61.0.3163.100, none of the solutions seem to be working. Screenshot This issue has been raised many times, but setting autoc ...

javascriptjqueryhtmlgoogle-chromeautocomplete

Designing a responsive navigation bar with slide functionality for both web and mobile interfaces utilizing Bootstrap

I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...

htmlcsstwitter-bootstrapbootstrap-4header

How to prevent mouse click events in Three.js after interacting with an HTML overlay

Encountering an issue with Three.js: I have created my own HTML user interface as a simple overlay. However, I am facing a problem where the mouse click does not reset when I interact with elements on this overlay. Specifically, when I click on the "Came ...

javascripthtmljqueryuser-interfacethree.js

Retrieving data from the database by selecting from a dropdown menu

How can I configure the section drop-down list to display all sections available for a specific subject based on the selection made in the previous drop-down menu containing subjects? For instance, if I select subject A, the drop-down should show me all av ...

phphtmlmysqli

What is the most effective method to ensure this layout is functioning properly?

Seeking a solution to an unexpected challenge, what initially appeared as a simple task has transformed into a complex dilemma. Balancing the vertical alignment of green DIVs while preventing absolute positioned elements from overlapping following content ...

cssalignment

What is the best way to design a form like this using CSS and potentially incorporating some JavaScript techniques?

In my current design, I have form labels positioned inline to the left of text fields, with each label varying in width. My goal is to align the right edge of the text fields. Here is how the fields currently appear, with the right edge misaligned: Name: ...

htmlcss

The view has no access to $scope but the controller does

I need to display the iso code using a $scope when selecting a country from a list. The list of countries is fetched through a $http call in a factory and then stored in a scope. ///////// get countries //////////////// tableFactory.getCountries().then(f ...

javascripthtmlangularjs

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml